I’m trying to prototype a countdown animation before a video plays. Upon hovering over thumbnail, the countdown fades in and starts counting (3, 2, 1).
I’m looking to animate the white border of the circle so it shows the progress of the countdown. Almost like a loader.
Any help on how to achieve this within webflow?
Here’s the webflow link: Webflow - Webflow Help
Here is my public share link: Webflow - Webflow Help
(how to access public share link)
Hey @juanerazo
You could try using a stroke based SVG and Vivus to animate the circle.
If you need to animate something after the circle fills, just add a delay in the Webflow interaction animation to match the length applied to the svg animation.
Hope that helps. Happy designing!
That’s a great resource! Thanks.
So, if you look at my webflow link, this svg wouldn’t be triggered to animate until I hover over the thumbnail. How do I control timing for this SVG that I created?
The circle will animate for 3 seconds, which is the length of countdown.
Wasn’t sure if this would work but it totally did. See below.
It’s a hover triggered animation on the paragraph that changes the html embed element from display:none to display:block. That’s it.
Here are the steps:
That’s it! The animation will automatically play on hover. If there will be multiple of these on a page, you’ll need to apply the animation to child elements only.
Worked perfectly! Thanks for your expertise.
Sweet! Sometimes the first intuition works without a hitch. Gotta love it when the stars line up.
Hi!
Awesome stuff, I’ve always wondered about those animated svg’s.
However I must be doing something wrong because it doesn’t seem to work on my end.
I create the svg, I copy the downloaded code, it shows me the image but it doesn’t animate at all (with or without triggers).
Any chance you can add a link for us to clone?
Hey @Nir
Sorry I don’t have a project to share with as an example. Maybe you can share yours?
The first thing I would check is that in Vivus the code was set to Autostart.
Hi,
It was.
Do I need to add any of the Vivus code also to the custom code section (the JS file, or any other code from Github), or give the embed a class or ID?
Im pretty sure im missing something 
link to the cloneable project
https://webflow.com/website/animatedsvg
Before downloading the SVG from Vivus did you see it animating in your browser? I tested with the default test svg and it worked in your project.
There are few conditions that your SVG must meet:
All elements must have a stroke property and cannot be filled. This is because the animation only looks to progressively draw strokes and will not check for filled colours. For example: fill: “none”; stroke: “#FFF”;
You should avoid creating any hidden path elements in your SVG. Vivus considers them all eligible to be animated, so it is advised to remove them before playing with it. If they are not removed the animation might not achieve the desired effect, with blank areas and gaps appearing.
text elements aren’t allowed, they cannot be transformed into path elements. See #22 for more details.
For more info see the documentation.
Hi @matthewpmunger,
Thank you for your reply, I’ve tested it with the default example from vivus and it works as well.
However im struggling to understand what kind of specific SVG images I should be using.
I usually download my SVG icons from this website which dont seem to work with vivus. I searched for stroke icons and downloaded from here (a collection of stroke icons but still doesnt seem to work.
What type of SVG should I be looking for?
The “stroke” icons that you downloaded actually are filled shapes. If you open the svg in a vector editing program you can see that there is no stroke applied. Basically “stroke” is being used to describe the icon style and not how the file is constructed.
Here is a snapshot from your icon set. You can see there’s no border, only fill.
Here’s a snapshot of a Webalys Streamline icon. You can see it is only a stroke.
Hope that helps. You might need to find an eps or ai file with strokes and convert it to svg.
