How to Animate SVG with GSAP — DrawSVG, MorphSVG, and ScrollTrigger
Animate SVG with GSAP — draw paths, morph shapes, trigger animations on scroll, and build complex SVG timeline sequences with the industry-standard animation library.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
GSAP DrawSVG — Animate SVG Path Drawing
GSAP's DrawSVG plugin animates the SVG stroke-dashoffset property to simulate a path being drawn. Install GSAP, register DrawSVG, then animate: `gsap.from('.path', { drawSVG: 0, duration: 2 })`. The path draws itself from 0% to 100% over 2 seconds — the signature animated illustration effect used across web design.
- `gsap.registerPlugin(DrawSVGPlugin)`
- `gsap.from('.my-path', { drawSVG: '0%', duration: 2 })`
- Animate partial draws: `drawSVG: '25% 75%'` draws the middle 50% of the path
GSAP ScrollTrigger with SVG
ScrollTrigger pairs with SVG animations to create scroll-driven illustration effects — paths that draw as you scroll, sections that animate into view, and progress indicators tied to scroll position. Register ScrollTrigger and add `scrollTrigger` config to any GSAP tween.
- `gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin)`
- ScrollTrigger config: `{ trigger: '.section', start: 'top center', scrub: true }`
- Scrub: `true` ties animation progress directly to scroll position
Frequently Asked Questions
Do I need a GSAP paid license for SVG animation on my website?
Basic GSAP (gsap npm package) is free for all uses including commercial. DrawSVG, MorphSVG, and SplitText are GSAP Club plugins requiring a paid GSAP membership. ScrollTrigger is free and included in the core GSAP package. Many SVG animation needs can be met with free GSAP + CSS.
How do I morph one SVG shape into another with GSAP?
Use GSAP's MorphSVG plugin (Club GSAP). Register it, then: `gsap.to('#shape1', { morphSVG: '#shape2', duration: 1 })`. Both shapes must have the same path origin for clean morphing. GSAP handles path normalization automatically for different point counts.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG