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-Transformation

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

Bewegungs-Transformation

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

Rotations-Transformation

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

Skalierungs-Transformation

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

Chaos-Transformation

  • 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