Animating SVG with GSAP (GreenSock)
GSAP is the industry-standard JavaScript animation library for SVG — smooth, cross-browser path animations with minimal code.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Getting Started with GSAP + SVG
GSAP targets any SVG attribute or CSS property for animation.
- Install: npm install gsap or CDN: <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.x.x/gsap.min.js'>
- Basic tween: gsap.to('#circle', { duration: 1, cx: 300, fill: 'blue' })
- Target any SVG attribute: x, y, r, d, fill, opacity, strokeDashoffset
- Timeline: const tl = gsap.timeline(); tl.from('.logo-path', { opacity: 0 }).to('.logo-path', { scale: 1.1 })
- Stagger: gsap.from('.icon-path', { opacity: 0, stagger: 0.1 }) — animate multiple paths sequentially
SVG Draw-On Effect with GSAP
The classic draw-on effect uses stroke-dashoffset animation.
- Get path length: const length = path.getTotalLength()
- Set initial state: gsap.set(path, { strokeDasharray: length, strokeDashoffset: length })
- Animate: gsap.to(path, { strokeDashoffset: 0, duration: 2, ease: 'power2.out' })
- Scroll trigger: wrap in ScrollTrigger for scroll-driven draw-on
- Multiple paths: stagger the draw-on for each path in sequence
Frequently Asked Questions
Is GSAP free for SVG animation?
GSAP Core and ScrollTrigger are free for most uses. Commercial plugins (MorphSVG, DrawSVGPlugin) require a Club GSAP membership or paid license.
What can GSAP do with SVG that CSS can't?
GSAP handles SVG path morphing (MorphSVG), precise path drawing control, complex sequence timelines, and cross-browser SVG transforms that CSS handles inconsistently.
How do I animate SVG on scroll with GSAP?
Use the ScrollTrigger plugin: gsap.to('.path', { strokeDashoffset: 0, scrollTrigger: { trigger: '.section', scrub: true } }) — the animation scrubs with scroll position.
Can GSAP morph SVG paths?
Yes — with the MorphSVG plugin (Club GSAP). gsap.to('#path1', { morphSVG: '#path2', duration: 1 }) morphs path1's d attribute into path2's shape smoothly.
Does GSAP work with React and Vue SVG components?
Yes. Use gsap.to(ref.current) to target SVG DOM elements via React refs. For Vue, target with template refs. The underlying GSAP DOM manipulation works identically.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free