How to Trigger SVG Animations on Scroll with Intersection Observer
Use Intersection Observer to start SVG animations when they enter the viewport — draw-on effects, fades, and morphs tied to scroll position.
Drop your image here
Supports PNG, JPG, WEBP up to 5MB
Intersection Observer for SVG Scroll Animations
Create an `IntersectionObserver` that watches the SVG element. When it enters the viewport (isIntersecting), add a CSS class that triggers the animation. Remove the class to reset on scroll-out.
- observer.observe(svgElement) to watch entry
- On intersect: element.classList.add('animate')
- CSS .animate class starts the keyframe or transition
Popular SVG Scroll Animation Patterns
Draw-on effect: trigger stroke-dashoffset animation on scroll. Counter animation: increment a number inside SVG text using JavaScript when in view. Fade-in: opacity 0 to 1 transition on .animate class.
- Stroke draw-on: add .animate to start dashoffset transition
- Number counter: requestAnimationFrame counter in observer callback
- Fade-in: CSS opacity transition on .animate class
Frequently Asked Questions
Is Intersection Observer better than scroll event for SVG animations?
Yes — Intersection Observer runs off the main thread and fires only on entry/exit, while scroll events fire continuously and require throttling.
How do I replay an SVG scroll animation on second view?
Remove the animation class in the observer's not-intersecting branch, then re-add it on next intersection to replay the animation.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in seconds.
Try It Free — Convert Image to SVG