This content originally appeared on DEV Community and was authored by HexShift
Animating SVG paths can create elegant and attention-grabbing UI effects, especially when done smoothly and efficiently. GSAP (GreenSock Animation Platform) makes this process easy and performant. In this article, we’ll explore how to animate complex SVG paths using GSAP, giving your site an extra layer of interactivity and polish.
1. Why Animate SVGs?
SVGs are scalable, resolution-independent, and styleable with CSS or JavaScript. They're ideal for logos, illustrations, icons, or even text. Animation adds life and personality, improving UX and drawing user attention in subtle ways.
2. Initial Setup
Let’s use an SVG path that we’ll animate to simulate a hand-drawn effect. Here's the HTML:
<svg width="300" height="150" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
<path id="myPath" d="M10,80 C60,10 140,10 190,80 S290,150 290,80" stroke="#3498db" stroke-width="4" fill="none" />
</svg>
Include GSAP from a CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>3. Animate the Path With GSAP
To animate a path like it's being drawn, you can use the `stroke-dasharray` and `stroke-dashoffset` properties:
<script>
const path = document.querySelector("#myPath");
const length = path.getTotalLength();
// Set up initial dash array and offset
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
// Animate the offset to 0
gsap.to(path, {
strokeDashoffset: 0,
duration: 2,
ease: "power1.inOut"
});
</script>This gives the appearance of the line being drawn from left to right.
4. Make It Loop or Repeat
gsap.fromTo(
path,
{ strokeDashoffset: length },
{
strokeDashoffset: 0,
duration: 2,
ease: "power2.out",
repeat: -1,
yoyo: true
}
);
This loops the drawing animation back and forth infinitely.
5. Trigger on Scroll with ScrollTrigger
GSAP's ScrollTrigger plugin allows you to sync the animation with scroll progress:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.from(path, {
strokeDashoffset: length,
duration: 2,
scrollTrigger: {
trigger: path,
start: "top 80%",
toggleActions: "play none none none"
}
});
</script>6. Advanced Ideas
- Animate multiple paths sequentially
- Combine with color transitions or fill changes
- Use in morphing SVGs with GSAP’s
morphSVGplugin
Conclusion
Animating SVG paths using GSAP allows for expressive and engaging visual effects that perform well on all devices. Whether it’s for a logo animation, section divider, or button effect, these animations elevate your frontend work significantly.
If this post helped you, consider supporting me here: buymeacoffee.com/hexshift
This content originally appeared on DEV Community and was authored by HexShift
HexShift | Sciencx (2025-04-18T03:34:31+00:00) How to Animate Complex SVG Paths with GSAP for Stunning UI Effects. Retrieved from https://www.scien.cx/2025/04/18/how-to-animate-complex-svg-paths-with-gsap-for-stunning-ui-effects/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.