ScrollSmoother und data-Attribute – kompakt erklärt
Wir haben GSAP an diversen Stellen in den Flexforms unserer TYPO3-Installationen eingebaut. Sie sind in Inhalts-/Funktionselementen als weiterer Reiter implementiert. Unter “Erscheinungsbild” lassen sich data-Attribute einstellen - ebenso für das figure-elment bei Medien.
Dokumentation ScrollSmoother: https://gsap.com/docs/v3/Plugins/ScrollSmoother/
ScrollSmoother verwendet das native Scrolling des Browsers. Zusätzliche Effekte werden direkt über HTML-Attribute wie data-speed, data-lag, "auto" und clamp() gesteuert – ohne visuelles Overhead oder künstliche Scrollleisten.
data-speed
Steuert die relative Scrollgeschwindigkeit eines Elements im Vergleich zum normalen Seiten-Scroll.
- data-speed="0.5"
→ Das Element scrollt langsamer als der Rest (hier: 50 %). - data-speed="-1"
→ Das Element bewegt sich in entgegengesetzter Richtung.
data-speed="auto"
Ermöglicht automatisches Parallax-Scrolling:
Wenn das Kindelement größer ist als sein Container (der overflow: hidden hat), berechnet ScrollSmoother automatisch den maximal möglichen Bewegungsspielraum des Elements – entweder nach oben oder unten, abhängig vom verfügbaren Platz.
data-speed="clamp(x)"
Ab Version 3.12 von GSAP kann clamp() verwendet werden, um die Startposition des Elements zu fixieren, wenn es beim Laden schon im sichtbaren Bereich ist (z. B. ganz oben auf der Seite).
- Ohne clamp():
Elemente werden so gesteuert, dass sie ihre "native" Position erreichen, wenn sie vertikal zentriert im Viewport sind. Das kann zu sichtbarem Versatz am Anfang führen. - Mit clamp():
Das Element startet an seiner normalen Position und bleibt innerhalb der Scroll-Grenzen. clamp() verhindert ein „Lecken“ der Bewegung über die sichtbaren Scrollbereiche hinaus – also nie unter scrollTop = 0 und nie über das Scroll-Ende hinaus.
data-lag
Verzögert die Bewegung des Elements beim Scrollen.
- data-lag="0.5"
→ Das Element „zieht nach“ und braucht 0,5 Sekunden, um zur Zielposition zu kommen.
Übersicht aller Beispiele
- data-speed="0.5"
- data-speed="-1"
- data-speed="auto"
- data-speed="clamp(0.5)"
- data-lag="0.5"
Beispiel 1: TYPO3 textmedia-Elemente mit data-speed-Funktion von GSAP ScrollSmoother
Beispiel 1: Sanfter Parallax-Effekt (langsamer scrollen)
In diesem Beispiel scrollt das Bild mit halber Geschwindigkeit (data-speed="0.5"), während der Text normal scrollt. Das erzeugt einen dezenten und eleganten Tiefeneffekt, bei dem der Text am Bild "vorbeigleitet".
Beispiel 3: data-speed="auto"
Funktionsweise von data-speed="auto"
Das Attribut data-speed="auto" in GSAP ScrollSmoother dient zur Erstellung einer automatischen Parallax-Animation.
Die Funktionalität basiert auf einer spezifischen Konstellation aus einem Eltern- und einem Kind-Element: Ein Kind-Element (z. B. ein Bild) ist in seiner natürlichen Dimension höher als sein Eltern-Container. Der Eltern-Container wiederum hat die CSS-Eigenschaft overflow: hidden, wodurch der überstehende Teil des Kind-Elements abgeschnitten wird.
Wenn diese Bedingungen erfüllt sind, berechnet ScrollSmoother automatisch den vertikalen Bewegungsspielraum des Kind-Elements. Beim Scrollen wird die Position des Kind-Elements so animiert, dass es vollständig durch den sichtbaren Bereich des Eltern-Containers gleitet.
Beispiel 5: data-speed="auto" für Background-Bilder "Hero-Format"
Viel Text über einen Bild mit data-speed="auto"
Mauris vitae quam in justo dictum sodales. In eget tortor a nunc vehicula tempor. Nam ac tincidunt ipsum, eget accumsan nisi. Praesent porta, magna vitae dapibus pharetra, erat eros efficitur nunc, in mattis lectus libero a velit. Nulla facilisi.
In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam eu nunc non augue tincidunt suscipit. Suspendisse potenti. Aliquam erat volutpat. Integer vel turpis sed purus scelerisque euismod.
Sed at risus vel nulla consequat fermentum. Donec et orci mauris. Nullam tempor velit id mi luctus, a scelerisque libero accumsan. In hac habitasse platea dictumst. Cras ac nunc nec massa tristique fringilla.
Morbi molestie arcu sit amet libero porttitor, a mollis odio suscipit. Fusce at sapien id justo cursus mollis. Ut non orci in magna pretium consequat. Nam id purus eu velit vulputate elementum. Mauris ac sapien non felis scelerisque tincidunt.
Nullam quis arcu in magna pulvinar tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nulla ut cursus laoreet. Nullam elementum lorem vel facilisis laoreet. Cras ac turpis vel erat vehicula venenatis.
Beispiel für data-speed="clamp(x)" mit Vergleich zu einem Element ohne clamp() – zum besseren Verständnis, warum clamp() nützlich ist.
Erklärung:
Beide Boxen liegen in der ersten Viewport-Hälfte.
- Ohne clamp() (data-speed="0.5"): Die Box wird beim Laden nach oben verschoben, da sie später (beim Scrollen) zentriert erscheinen soll. Das wirkt wie ein „Fehlstart“.
- Mit clamp() (data-speed="clamp(0.5)"): Die Box bleibt an ihrem Platz. Kein Versatz, kein optisches Hüpfen – sie startet korrekt in ihrer eigentlichen Position.
Ohne clamp (data-speed="0.5")
Mit clamp (data-speed="clamp(0.5)")
