GSAP (GreenSock Animation Platform) ist eine JavaScript-Bibliothek zur Erstellung von Web-Animationen. Sie bietet eine deklarative API für Tweens (Einzelanimationen) und Timelines (Animationssequenzen), die unabhängig von CSS-Transitions und dem nativen Web Animations API arbeitet.
Bedeutung
GSAP hat sich als Industriestandard für anspruchsvolle Web-Animationen etabliert und wird laut GreenSock auf über 12 Millionen Websites eingesetzt. Die Bibliothek löst Probleme, an denen CSS-Animationen scheitern: komplexe Sequenzierung, ScrollTrigger-basierte Steuerung und konsistentes Rendering über alle Browser. Für Performance-kritische Websites bietet GSAP GPU-beschleunigte Transforms, die auch bei 60fps stabil bleiben.
Funktionsweise
GSAP interpoliert CSS-Properties, SVG-Attribute oder JavaScript-Objekte über Zeit. Die Kernmethoden gsap.to(), gsap.from() und gsap.fromTo() definieren Start- und Endwerte einer Animation. Mehrere Tweens werden auf einer gsap.timeline() orchestriert, die pausiert, beschleunigt oder reversed werden kann. Das ScrollTrigger-Plugin verknüpft Animationen mit der Scroll-Position des Viewports — entweder als Trigger (Animation startet bei Erreichen) oder als Scrub (Animation folgt dem Scroll 1:1).
Praxisbeispiel
Eine Agentur-Website animiert den Hero-Bereich mit einer GSAP-Timeline: Logo faded ein, Headline slidet von links, Subline erscheint mit 0,3s Versatz. ScrollTrigger pinnt den Bereich während einer scroll-gesteuerten Parallax-Transition. Die gesamte Sequenz bleibt bei 60fps, da GSAP ausschließlich GPU-beschleunigte transform- und opacity-Properties animiert.