In den eigenen Worten des Skills
gsap-core ist die Einstiegs-Skill für die Core-Engine von GSAP: einzelne Tweens mit gsap.to(), gsap.from(), gsap.fromTo() und gsap.set(), plus die gängigen Vars – duration (Standard 0.5), delay, ease (Standard power1.out), stagger, overwrite und immediateRender. Sie dokumentiert die Transform-Aliase von GSAP (x, y, scale, rotation, xPercent), autoAlpha für Fades, clearProps, funktionsbasierte und relative Werte sowie projektweite gsap.defaults().
Ein großer Abschnitt behandelt gsap.matchMedia() für responsive Breakpoints und prefers-reduced-motion und schließt mit einer offiziellen Best-Practices-Liste und einem Abschnitt „Nicht tun“. Er richtet sich an Designer und Entwickler, die GSAP-Animationen in React, Vue, Svelte oder Vanilla JS schreiben oder überprüfen.
Was er erzeugt
- DOM-Elemente, animiert über CSSPlugin, das in der Core-Engine enthalten ist und kein zusätzliches Plugin benötigt.
- Eine Tween-Instanz, die von jeder Tween-Methode zurückgegeben wird und die Sie speichern, wenn Sie pausieren, abspielen, umkehren, beenden oder scrubben müssen.
- Transformationen, die als Aliase geschrieben und in fester Reihenfolge angewendet werden: translation, scale, rotationX/Y, skew, rotation.
- Animationen und ScrollTriggers, die innerhalb eines matchMedia-Handlers erstellt werden und automatisch zurückgesetzt werden, sobald die Query nicht mehr zutrifft.
So funktioniert es
- 01Die richtige Tween-Methode wählen
gsap.to() animiert vom aktuellen Zustand zu den übergebenen vars und ist der gängigste Aufruf; from() kehrt dies für Einblendungen um, fromTo() legt beide Enden explizit fest, ohne aktuelle Werte zu lesen, und set() wendet sofort mit Dauer 0 an.
- 02Vars in camelCase schreiben
Eigenschaftsnamen innerhalb des vars-Objekts müssen in camelCase geschrieben werden, sodass CSS-Eigenschaften wie background-color oder font-size zu backgroundColor und fontSize werden.
- 03Versatz mit Stagger
Eine einfache Zahl bei stagger ist die Anzahl Sekunden zwischen jedem Target; die Objektform fügt Optionen wie amount mit einer from-Richtung hinzu, oder each mit from: "random".
- 04Ein Ease wählen
String-Eases decken die meisten Fälle ab — power1.out ist das Standardgefühl, mit back.out(1.7), elastic.out(1, 0.3), power3.inOut und none als dokumentierte Alternativen.
- 05Werte pro Target berechnen
Eine als vars-Wert übergebene Funktion wird beim ersten Rendern für jedes Target einmal aufgerufen, sodass indexbasierte Werte wie x: (i) => i * 50 über eine Menge verteilt werden können.
- 06Arbeit auf Media Queries beschränken
gsap.matchMedia() führt seinen Setup-Handler nur aus, während die Query zutrifft — so behandelt der Skill responsive Breakpoints und Nutzer mit reduzierter Bewegung.