Summary  
This chapter covers using GSAP to animate SVG elements by targeting shapes or classes, manipulating properties like strokeDasharray and strokeDashoffset for drawing effects, and combining color and movement transitions for smooth, scalable animations.

General domain of usage  
Web interface animations

When animating SVG elements, you can target shapes using their class names or element types, just like regular DOM elements. For visually appealing SVG animations:

- Use clear, simple shapes or paths for smooth motion;
- Animate properties like `strokeDashoffset` and `strokeDasharray` to create "drawing" effects;
- Combine color transitions (fill, stroke) with movement for added interest;
- Keep SVGs optimized for performance and scalability.

Animating SVG graphics with **GSAP** allows you to create crisp, resolution-independent effects that look sharp on any device or screen size.

Ly8gQW5pbWF0ZSB0aGUgU1ZHIGNpcmNsZSdzIHN0cm9rZS1kcmF3aW5nIGVmZmVjdApjb25zdCBjaXJjbGUgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCIuY2lyY2xlIik7CmNvbnN0IGNpcmNsZUxlbmd0aCA9IGNpcmNsZS5nZXRUb3RhbExlbmd0aCgpOwoKY2lyY2xlLnN0eWxlLnN0cm9rZURhc2hhcnJheSA9IGNpcmNsZUxlbmd0aDsKY2lyY2xlLnN0eWxlLnN0cm9rZURhc2hvZmZzZXQgPSBjaXJjbGVMZW5ndGg7Cgpnc2FwLnRvKGNpcmNsZSwgewogIHN0cm9rZURhc2hvZmZzZXQ6IDAsCiAgZHVyYXRpb246IDIsCiAgZWFzZTogInBvd2VyMi5pbk91dCIKfSk7CgovLyBBbmltYXRlIHRoZSBzdGFyIHBhdGgncyBmaWxsIGFuZCBzdHJva2UKZ3NhcC5mcm9tVG8oCiAgIi5zdGFyIiwKICB7CiAgICBmaWxsOiAiI2ZmZmJlNiIsCiAgICBzdHJva2U6ICIjZTY3ZTIyIiwKICAgIHN0cm9rZURhc2hhcnJheTogNjAwLAogICAgc3Ryb2tlRGFzaG9mZnNldDogNjAwCiAgfSwKICB7CiAgICBmaWxsOiAiI2ZmZTA2NiIsCiAgICBzdHJva2U6ICIjZjM5YzEyIiwKICAgIHN0cm9rZURhc2hvZmZzZXQ6IDAsCiAgICBkdXJhdGlvbjogMi41LAogICAgZGVsYXk6IDAuNSwKICAgIGVhc2U6ICJwb3dlcjEub3V0IgogIH0KKTs=

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHN0eWxlPgogICAgICBib2R5IHsKICAgICAgICBmb250LWZhbWlseTogc2Fucy1zZXJpZjsKICAgICAgICBwYWRkaW5nOiAyMHB4OwogICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgICAgfQoKICAgICAgc3ZnIHsKICAgICAgICB3aWR0aDogMjUwcHg7CiAgICAgICAgaGVpZ2h0OiAyNTBweDsKICAgICAgICBtYXJnaW4tdG9wOiAyMHB4OwogICAgICB9CgogICAgICAuY2lyY2xlIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzM0OThkYjsKICAgICAgICBzdHJva2Utd2lkdGg6IDQ7CiAgICAgIH0KCiAgICAgIC5zdGFyIHsKICAgICAgICBmaWxsOiAjZmZmYmU2OwogICAgICAgIHN0cm9rZTogI2U2N2UyMjsKICAgICAgICBzdHJva2Utd2lkdGg6IDM7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+CiAgICAgIDwhLS0gQ2lyY2xlIC0tPgogICAgICA8Y2lyY2xlIGNsYXNzPSJjaXJjbGUiIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjgwIj48L2NpcmNsZT4KCiAgICAgIDwhLS0gU3RhciBTaGFwZSAtLT4KICAgICAgPHBhdGgKICAgICAgICBjbGFzcz0ic3RhciIKICAgICAgICBkPSIKICAgICAgTTEwMCAyMAogICAgICBMMTIwIDgwCiAgICAgIEwxODAgODAKICAgICAgTDEzMCAxMjAKICAgICAgTDE1MCAxODAKICAgICAgTDEwMCAxNDAKICAgICAgTDUwIDE4MAogICAgICBMNzAgMTIwCiAgICAgIEwyMCA4MAogICAgICBMODAgODAKICAgICAgWgogICAgIgogICAgICA+PC9wYXRoPgogICAgPC9zdmc+CgogICAgPCEtLSBHU0FQIENETiAtLT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9nc2FwLzMuMTIuNS9nc2FwLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0ic2NyaXB0LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Why are SVGs often used for web animations?

Create smooth, interactive animations using GSAP, the powerful JavaScript animation library. Learn how to build tweens, sequence timelines, animate DOM elements, and introduce natural motion with easing. Add scroll-based effects and apply your skills to real-world mini projects for polished, engaging web experiences.

Build a strong foundation in GSAP by learning how tweens work, how to animate multiple properties, and how easing adds natural motion. Explore the basics of sequencing to connect multiple animations smoothly. Establish the core animation skills needed before working with more advanced features.

Learn to control, nest, and synchronize animations using timelines for precise sequencing. Animate DOM elements, SVG graphics, and text to create expressive, flexible effects. Strengthen your ability to structure complex motion in a clear, maintainable way.

Bring your pages to life with scroll-driven interactions powered by ScrollTrigger. Apply your GSAP skills to real-world mini projects that combine tweens, timelines, and scroll-based motion. Build visually impressive animations that enhance modern web interfaces.

Animating SVG Graphics

Animating SVG Graphics