Scroll-Animator

Der Scroll-Animator transformiert ausgewählte Elemente während des Scrollens im Sichtbereich des endsprechenden Elementes. Unter Transformation ist Translation (Bewegung), Rotation, Skalierung und Deckkraft gemeint.

• Deckkraft von 0% auf 100%
• Animationsspektrum: Element vollständig im Viewport

• Translation von 0px auf 300px
• Animationsspektrum: Element vollständig im Viewport

• Rotation von 0° auf 180°
• Animationsspektrum: Element teilweise im Viewport
• Invertierung aktiviert

• Skalierung von 0% auf 50%
• Animationsspektrum: Element vollständig im Viewport

• Deckkraft von 0% auf 100%
• Translation-X und -Y von 0px auf 150px
• Rotation von 0° auf 360°
• Skalierung von 0% auf 100%
• Animation beginnt früher (100% von der Element-Höhe)
• Animationsspektrum: Element teilweise im Viewport
• Easing-Funktion: Ease-In-Out-Elastic