# Svelte Motion vs GSAP GSAP is a timeline engine. Svelte Motion is a component library. Different problems. ## Overview GSAP is the heavyweight timeline engine for the web — imperative, plugin-rich, and mature. @humanspeak/svelte-motion is a declarative component library for Svelte 5 — gestures, layout, presence, variants, drag. There is overlap (both can tween a property), but each is shaped around a different model of how UI animation works. - **Svelte Motion site:** https://motion.svelte.page - **Svelte Motion npm:** https://www.npmjs.com/package/%40humanspeak%2Fsvelte-motion - **Svelte Motion slug:** svelte-motion - **Category:** Imperative timeline engine - **Approach:** gsap.to() / gsap.timeline() / plugins - **Website:** https://gsap.com - **GitHub:** https://github.com/greensock/GSAP - **npm:** https://www.npmjs.com/package/gsap ## Feature comparison | Feature | @humanspeak/svelte-motion | GSAP | Notes | | --- | --- | --- | --- | | Tween any CSS property | Yes | Yes | | | Spring physics | type: "spring" | No native spring ease — Physics2D / CustomBounce approximations | | | Curved motion paths | arc() on transition.path | MotionPathPlugin (any SVG path) | | | Timelines with scrub / labels / nesting | No | Best-in-class | | | Declarative motion. components | ~170 tags | No | | | AnimatePresence exit animations | Yes | No | | | whileHover / whileTap / whileFocus / whileInView | Yes | No | GSAP requires manual pointer / IntersectionObserver wiring. | | Drag with constraints / momentum / elastic | Built in (drag prop) | Draggable + InertiaPlugin | | | FLIP layout animation | layout / layout="position" | Flip plugin (imperative) | | | Shared layout (layoutId) | Yes | No | | | Variants with parent → child propagation | Yes | No | | | ScrollTrigger (pin / scrub / snap) | Partial (useScroll + useTransform) | Best-in-class | | | MorphSVG path morphing | motion.path + flubber | MorphSVGPlugin (free since 3.13) | | | Reactive motion values | Yes | No | | | License | MIT (open source) | Free for commercial use, but proprietary (GreenSock Standard License) | | | Framework integration | Native Svelte 5 | Framework-agnostic | | ## Svelte Motion strengths - Svelte 5 runes-native — built for runes, not retrofitted - Framer Motion-compatible API for component code (props, semantics, AnimatePresence, variants) - ~170 motion. proxy components covering every HTML and SVG element - Full gesture set: whileHover, whileTap, whileFocus, whileInView - Drag gesture with constraints, momentum, elastic, snap-to-origin, axis lock - FLIP layout animation and shared layoutId out of the box - Spring physics, scroll-linked motion values, and reactive useMotionValue / useTransform - SSR-safe by default — initial state renders server-side, hydrates without flicker - Tree-shakeable Motion named exports for bundle-size-critical apps - TypeScript-first with full type safety across motion props, drag, variants, and hooks - MIT licensed — open source, fork it or vendor it, no commercial tier - Declarative props for hover / tap / focus / in-view — no listener plumbing - AnimatePresence handles exit animations without manual unmount delay - FLIP layout and shared layoutId animate component-level box changes automatically - Truly open source (MIT) — GSAP is free to use but Webflow-owned and not OSS ## GSAP strengths - Timeline orchestration is genuinely best-in-class — scrubbing, labels, nesting, reverse - Deep plugin ecosystem — ScrollTrigger, Flip, MorphSVG, Draggable, SplitText, Observer — and every plugin is free since 3.13 (May 2025) - Decade-plus of production hardening across thousands of sites - Ad-tech and creative-coding industry standard - Detailed control over every easing curve and motion path ## Svelte Motion limitations - Requires Svelte 5 + runes (no Svelte 4 / legacy stores support) - Newer project — smaller community than the React Framer Motion ecosystem - transition.staggerChildren orchestrator not yet wired — drive cascades with per-child delay - Timeline orchestration is shallower than GSAP — no scrub / label / nested timeline equivalents ## GSAP limitations - Imperative API — you own DOM refs, lifecycle, and gesture state machines - No declarative gesture props (whileHover / whileTap / whileFocus / whileInView) - No AnimatePresence equivalent — manual unmount delay required - No shared-layout (layoutId) animation pattern - Free but not open source — Webflow owns the IP; the Standard License bars reverse engineering and use in competing no-code animation builders - Larger bundle once you add ScrollTrigger / Flip / Draggable ## Verdict Choose GSAP when you need its timeline depth, ScrollTrigger pinning, MorphSVG, or already have a GSAP-comfortable team. Choose @humanspeak/svelte-motion for declarative component-level animation in Svelte 5 — gestures, presence, layout, drag. The two can coexist in the same app: Svelte Motion for UI animation, GSAP when you need its timeline engine. ## Keywords gsap svelte, svelte gsap alternative, gsap vs framer motion, svelte timeline animation, gsap vs svelte motion