Streaming live at 10am (PST)

Border Animation (circle loader for countdown)


#1

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: https://preview.webflow.com/preview/webflow-help?preview=220d08b173179b665309ecccc0d36cdf


Here is my public share link: https://preview.webflow.com/preview/webflow-help?preview=220d08b173179b665309ecccc0d36cdf
(how to access public share link)


#2

Hey @juanerazo

You could try using a stroke based SVG and Vivus to animate the circle.
https://maxwellito.github.io/vivus-instant/

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!


#3

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.


#4

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:

  • Create the animated svg using Vivus and make sure it is on autostart with loop off
  • Download the svg, open the file, and copy the code
  • Add a html embed element in Webflow then paste in the code
  • Select the element that should trigger the hover effect
  • Add a hover triggered animation
  • Select the html embed and give it an initial state of display:none
  • Add another step to the animation that changes the state to display:block

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.


How to make circle around in page loader?
#5

Worked perfectly! Thanks for your expertise.


#6

Sweet! Sometimes the first intuition works without a hitch. Gotta love it when the stars line up.