Ein Objekt liegt in einer festen Ebene und dockt nacheinander an die gestrichelten Plätze an. Die Plätze kleben per CSS sticky in ihrer Sektion, kein GSAP-pin.
Zwischen zwei Plätzen fliegt es auf einem Bogen, wird kurz größer und neigt sich. Ab der Mitte eines Übergangs gilt der Zustand des Zielplatzes (Etikett unten rechts).
Weiterscrollen.
Dieser Platz ist breiter und trägt data-wandert-drehung="40". Größe und Drehung
kommen aus dem Platz, nicht aus der Animation.
Mobil (unter 768 px) gilt data-wandert-drehung-mobil="0".
Der Platz trägt data-wandert-zustand="kantig". Im Objekt liegen beide Bilder
übereinander (data-wandert-bild); der Baustein schaltet um, CSS blendet in 300 ms.
Dieser kleine Platz hat data-wandert-mobil="aus": am Handy wird er ausgelassen,
das Objekt geht direkt von „kantig" zur Schachtel.
Beim Ankommen auf einem Platz ruft der Baustein onLanden; die Demo staucht das
Objekt kurz (≤ 400 ms). Rückwärtsscrollen spielt alles rückwärts.
Hier geht die Seite normal weiter. Mit prefers-reduced-motion: reduce sitzt das
Objekt immer auf einem Platz und springt in der Mitte eines Übergangs; ohne JavaScript stehen die
ruhenden Bilder in den Plätzen.
Parameter: ?ohne-lenis schaltet Lenis ab (für Messungen).