GSAP - StartEnd (dynamisch)

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
Code Elemente - HTML - CSS - JS

Hinweis

Der Trigger für die Animation wird in der vertikalen Mitte des Browserfenster festgelegt.

start: "center center",

Der Start- und Endpunkt der Animation wird dynamisch auf die Höhe des animierten Objekts beschränkt. Dazu wird die Höhe des Elements ".a" abgefragt und mit "+=" hinzu konkatiniert.

end: () => "+=" + document.querySelector(".a").offsetHeight

Als Wert für "end:" wird eine namenlose Funktion eingesetzt und die Parameter direkt hinzugefügt.

Wird die Höhe der Box erhöht, wird auch der Bereich für den Animations-Trigger erhöht:

.box {

            height:150px;

        }