How to trigger an SVG animation in Webflow?

I have an SVG animation I made with Vivus, I downloaded the file that Vivus provided me with and uploaded it to Webflow as an image, I planted it into my page and everything works great. But, the animation starts on page load and I want it to start only when it (the svg) is scrolling into view.

Hope I have explained myself clearly.
Does anyone know what I should do?


Ok, so I got into the subject and realised that I can do it with ScrollMagic. This article explains:

Unfortunately I do not know JS Or code in general… I still tried it but its not working for me… Does anyone have experience in this and can shed some light on this issue?

Much obliged!

scrollMagic it’s for pro-CSS/JS users (No way to solve this by forum Q) + scrollMagic SVG idea is for advanced (Read scrollMagic docs).

Vivus is a framework - you have build-in API methods to stop/play/reset animation

If you know to work with vivus play/stop/reset - the next step is to do X when the SVG into view and Y when out of view:

-or- by plugin

“The problem” - your Q is more for a freelancer job (Combine VIVUS with scroll events – than move this code to webflow).

Hey Siton
Thank you for taking the time and responding to my question.

I will go over the materials you attached.
In the end, If I will need someone to do it as a freelance job, will you be interested?

1 Like