SVG Animation Basics: CSS and JavaScript Guide

Three Ways to Animate SVG

SVG elements can be animated using CSS animations, JavaScript (including libraries like GreenSock), or SMIL (SVG's built-in animation). CSS and JavaScript are preferred — SMIL is deprecated in some browsers.

CSS Animations on SVG Elements

SVG elements respond to CSS just like HTML elements. Any SVG attribute that maps to a CSS property can be animated using CSS transitions or @keyframes.

• Animatable CSS properties on SVG: opacity, transform, fill, stroke, stroke-width
• Use 'transition: fill 0.3s ease' for hover color changes on icons
• Use @keyframes with 'transform: rotate()' for spinning loader icons
• Apply animations to <path>, <circle>, <rect>, and <g> elements the same way as HTML

The Stroke Draw-On Effect

One of the most popular SVG animations is the 'draw-on' effect — paths appear to be drawn in real time. This uses the stroke-dasharray and stroke-dashoffset CSS properties.

• Set stroke-dasharray equal to the total path length (use path.getTotalLength() in JavaScript)
• Set stroke-dashoffset to the same value (hides the stroke entirely)
• Animate stroke-dashoffset to 0 — this makes the stroke appear to draw itself
• Use fill: none and a visible stroke color for the effect to work

Animating SVG with JavaScript

For complex animations, JavaScript gives you full programmatic control. The Web Animations API works on SVG elements. GreenSock (GSAP) is the most popular library for advanced SVG animation.

• Select SVG elements with document.querySelector('#my-path')
• Use element.animate() with the Web Animations API for frame-based control
• GSAP's gsap.to('#element', { rotation: 360, duration: 1 }) works on SVG elements
• Use GSAP's MotionPath plugin to animate elements along an SVG path
• Trigger animations on scroll using IntersectionObserver

Performance Tips for SVG Animation

SVG animations can be performant but require attention to which properties trigger layout or paint.

• Animate transform and opacity — these are GPU-accelerated and don't trigger layout
• Avoid animating width, height, x, y directly — use transform: translate() instead
• Add 'will-change: transform' sparingly for elements that animate continuously
• Use requestAnimationFrame for JavaScript-driven frame-by-frame animations
• Keep animated SVGs simple — complex paths with many points are expensive to render

Frequently Asked Questions

Related guides