Scroll-gesteuerte Animationen 1.2.0

Animationen auslösen, während Elemente in den Viewport scrollen, mit reinen CSS Scroll-driven Animations — kein JavaScript nötig. English: Scroll-driven

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Design Intelligence (Plan / Review / Agent Meta) ist getrennt und dort beta / foundation, wo es markiert ist.

Wann verwenden

Progressive Scroll-Timeline- / View-Timeline-Effekte, wo Browser sie unterstützen.
Immer einen Fallback ohne Scroll-Animation anbieten; Reduced Motion gilt weiterhin.

Wann nicht

prefers-reduced-motion bei dekorativer Bewegung nicht ignorieren.
Keine Attention-Loops auf großen Inhaltsbereichen verwenden — CSS-Tokens und kurze Dauern bevorzugen.

Beim Scrollen animieren

.velin-animate-on-scroll hinzufügen, um eine Animation auszulösen, wenn das Element in den Viewport kommt:

<div class="velin-animate-on-scroll velin-animate-fade-in-up">
  Fades in as you scroll down to it
</div>

Scroll-Fortschritt

Eine Lese-Fortschrittsleiste erstellen, die sich anhand der Scrollposition füllt:

<div class="velin-scroll-progress"></div>

Parallax

Subtile Parallax-Bewegung anwenden, die an die Scrollposition gekoppelt ist:

<div class="velin-parallax" style="--velin-parallax-speed: 0.3">
  Moves at 30% of scroll speed
</div>

Browser-Support

Scroll-driven Animations benötigen Unterstützung für animation-timeline (Chrome 115+, Edge 115+). Firefox und Safari ergänzen Unterstützung. VelinStyle degradiert sauber — Elemente bleiben in nicht unterstützten Browsern ohne Animation sichtbar.

Attribute & Runtime

Für Varianten, die beim Scrollen ausgelöst werden, velin-reveal / initMotion() bevorzugen — siehe Motion & attributes. Die CSS-Klassen hier bleiben ohne JS gültig.

Performance

Compositor-freundliche Properties bevorzugen. Der IO-Pfad der Motion-Runtime ist meist günstiger als viele unabhängige Scroll Listener.