gsap

GSAP Core Tween Methods gsap.to(targets, vars) — animate from current state to vars . Most common. gsap.from(targets, vars) — animate from vars to current state (entrances). gsap.fromTo(targets, fromVars, toVars) — explicit start and end. gsap.set(targets, vars) — apply immediately (duration 0). Always use camelCase property names (e.g. backgroundColor , rotationX ). Common vars duration — seconds (default 0.5). delay — seconds before start. ease — "power1.out" (default), "power3.inOut" , "back.out(1.7)" , "elastic.out(1, 0.3)" , "none" . stagger — number 0.1 or object: { amount: 0.3, from: "center" } , { each: 0.1, from: "random" } . overwrite — false (default), true , or "auto" . repeat — number or -1 for infinite. yoyo — alternates direction with repeat. onComplete , onStart , onUpdate — callbacks. immediateRender — default true for from()/fromTo(). Set false on later tweens targeting the same property+element to avoid overwrite. Transforms and CSS Prefer GSAP's transform aliases over raw transform string: GSAP property Equivalent x , y , z translateX/Y/Z (px) xPercent , yPercent translateX/Y in % scale , scaleX , scaleY scale rotation rotate (deg) rotationX , rotationY 3D rotate skewX , skewY skew transformOrigin transform-origin autoAlpha — prefer over opacity . At 0: also sets visibility: hidden . CSS variables — "--hue": 180 . svgOrigin (SVG only) — global SVG coordinate space origin. Don't combine with transformOrigin . Directional rotation — "360_cw" , "-170_short" , "90_ccw" . clearProps — "all" or comma-separated; removes inline styles on complete. Relative values — "+=20" , "-=10" , "*=2" . Function-Based Values gsap . to ( ".item" , { x : ( i , target , targets ) => i * 50 , stagger : 0.1 , } ) ; Easing Built-in eases: power1 – power4 , back , bounce , circ , elastic , expo , sine . Each has .in , .out , .inOut . Defaults gsap . defaults ( { duration : 0.6 , ease : "power2.out" } ) ; Controlling Tweens const tween = gsap . to ( ".box" , { x : 100 } ) ; tween . pause ( ) ; tween . play ( ) ; tween . reverse ( ) ; tween . kill ( ) ; tween . progress ( 0.5 ) ; tween . time ( 0.2 ) ; gsap.matchMedia() (Responsive + Accessibility) Runs setup only when a media query matches; auto-reverts when it stops matching. let mm = gsap . matchMedia ( ) ; mm . add ( { isDesktop : "(min-width: 800px)" , reduceMotion : "(prefers-reduced-motion: reduce)" , } , ( context ) => { const { isDesktop , reduceMotion } = context . conditions ; gsap . to ( ".box" , { rotation : isDesktop ? 360 : 180 , duration : reduceMotion ? 0 : 2 , } ) ; } , ) ; Timelines Creating a Timeline const tl = gsap . timeline ( { defaults : { duration : 0.5 , ease : "power2.out" } } ) ; tl . to ( ".a" , { x : 100 } ) . to ( ".b" , { y : 50 } ) . to ( ".c" , { opacity : 0 } ) ; Position Parameter Third argument controls placement: Absolute : 1 — at 1s Relative : "+=0.5" — after end; "-=0.2" — before end Label : "intro" , "intro+=0.3" Alignment : "<" — same start as previous; ">" — after previous ends; "<0.2" — 0.2s after previous starts tl . to ( ".a" , { x : 100 } , 0 ) ; tl . to ( ".b" , { y : 50 } , "<" ) ; // same start as .a tl . to ( ".c" , { opacity : 0 } , "<0.2" ) ; // 0.2s after .b starts Labels tl . addLabel ( "intro" , 0 ) ; tl . to ( ".a" , { x : 100 } , "intro" ) ; tl . addLabel ( "outro" , "+=0.5" ) ; tl . play ( "outro" ) ; tl . tweenFromTo ( "intro" , "outro" ) ; Timeline Options paused: true — create paused; call .play() to start. repeat , yoyo — apply to whole timeline. defaults — vars merged into every child tween. Nesting Timelines const master = gsap . timeline ( ) ; const child = gsap . timeline ( ) ; child . to ( ".a" , { x : 100 } ) . to ( ".b" , { y : 50 } ) ; master . add ( child , 0 ) ; Playback Control tl.play() , tl.pause() , tl.reverse() , tl.restart() , tl.time(2) , tl.progress(0.5) , tl.kill() . Performance Prefer Transform and Opacity Animating x , y , scale , rotation , opacity stays on the compositor. Avoid width , height , top , left when transforms achieve the same effect. will-change will-change : transform ; Only on elements that actually animate. gsap.quickTo() for Frequent Updates let xTo = gsap . quickTo ( "#id" , "x" , { duration : 0.4 , ease : "power3" } ) , yTo = gsap . quickTo ( "#id" , "y" , { duration : 0.4 , ease : "power3" } ) ; container . addEventListener ( "mousemove" , ( e ) => { xTo ( e . pageX ) ; yTo ( e . pageY ) ; } ) ; Stagger > Many Tweens Use stagger instead of separate tweens with manual delays. Cleanup Pause or kill off-screen animations. References (loaded on demand) references/effects.md — Drop-in effects: typewriter text, audio visualizer. Read when needing ready-made effect patterns for HyperFrames. Best Practices Use camelCase property names; prefer transform aliases and autoAlpha. Prefer timelines over chaining with delay; use the position parameter. Add labels with addLabel() for readable sequencing. Pass defaults into timeline constructor. Store tween/timeline return value when controlling playback. Do Not Animate layout properties (width/height/top/left) when transforms suffice. Use both svgOrigin and transformOrigin on the same SVG element. Chain animations with delay when a timeline can sequence them. Create tweens before the DOM exists. Skip cleanup — always kill tweens when no longer needed.