Cheatsheet — GSAP

Which tween method?

Need	Use
Animate from current values to new ones	gsap.to(target, {...})
Animate from given values to current ones	gsap.from(target, {...})
Full control over start and end	gsap.fromTo(target, {...}, {...})
Instantly set values, no animation	gsap.set(target, {...})
Several steps in sequence/parallel	gsap.timeline() then .to()/.from() on it
High-frequency updates (mousemove/drag)	gsap.quickTo() / gsap.quickSetter()

Which plugin for which effect?

Effect	Plugin
Scroll-triggered play/scrub/pin	ScrollTrigger
Smooth-scrolling wrapper	ScrollSmoother (built on ScrollTrigger)
Drag/sortable/spinnable elements	Draggable
Animate between two DOM/layout states	Flip
Per-char/word/line text animation	SplitText
Typewriter/scramble text reveal	ScrambleTextPlugin
Animate along an SVG path	MotionPathPlugin
Morph one SVG shape into another	MorphSVGPlugin
Draw/erase an SVG stroke	DrawSVGPlugin
Animate a raw CSS rule (not an element)	CSSRulePlugin
Physics-based deceleration/snap	InertiaPlugin
Normalize wheel/touch/pointer input	Observer (low-level; ScrollTrigger uses it internally)
Debug/scrub a timeline visually	GSDevTools

Decision rules

• Timeline vs individual tweens: use a timeline the moment two or more tweens need relative timing (sequence, overlap, shared labels). A single isolated animation doesn't need one.
• scrub vs toggleActions: scrub when the animation should track scroll position (parallax, progress bar). toggleActions (with start/end) when it should play once on entering/leaving the viewport.
• stagger vs manual delay loop: always prefer stagger — it supports from, grid, and per-index easing that a manual loop has to reimplement.
• CSS transition vs GSAP: reach for GSAP once you need sequencing, scroll-linking, SVG morphing/drawing, physics, or JS-driven interruption/retargeting mid-animation — plain CSS transitions are fine for simple, single-property hover states.
• gsap.to() vs gsap.quickTo() in a loop: if the same property on the same target is being updated many times per second (drag, pointer tracking), use quickTo/quickSetter — calling gsap.to() per frame creates a new tween each time and is wasteful.

Cleanup & correctness

• Always gsap.registerPlugin(...) once (per plugin) before use — a missing registration is the most common "my plugin properties are ignored" bug.
• In React/Vue/Svelte, scope setup with gsap.context() and call ctx.revert() on unmount — prevents leaked tweens/ScrollTriggers across remounts.
• Call ScrollTrigger.refresh() after any layout change that happens outside GSAP's control (images loading, fonts swapping, accordion toggles) so trigger positions stay accurate.
• Use invalidateOnRefresh: true on a ScrollTrigger-driven tween when its start/end values depend on element size (so they recalculate on resize instead of using stale pixel values).

Performance defaults

• Prefer transform properties (x, y, scale, rotation) over left/top/width/height — they're GPU-accelerated and don't trigger layout.
• Let force3D: "auto" (the default) decide when to promote to the GPU; don't force true globally, it costs memory per promoted element.
• autoAlpha instead of opacity when an element should also stop intercepting pointer events at 0.