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, BMP, 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 under 3 seconds.
Try It Free — Convert Image to SVG