Hey,
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?
Thx
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?