Streaming live at 10am (PST)

How to Setup a Seamless, Looping Animation


#1

I’m lost trying to do something I thought would be fairly easy and straight-forward: a simple animation that should start on page load, and repeat infinitely. There are many use-cases for this kind of looping animation: a logo that should rotate endlessly, an element that should ‘glow’ (ie. an animated drop shadow), or an icon that should move back and forth across the screen.

All these animations have the following in common:

  1. they all end exactly in the same state where they started - ie., the end keyframe is the same as the first keyframe
  2. they are endless: they should continue playing, over and over again, without stopping

As there is no ‘step-by-step’ instruction anywhere on how to set this up, I’ve been trying to do it on my own, based on the existing ‘Interactions’ tutorials, but without success.

The problems I’ve come across are:

  • the animation will play once, and then stop - even though I can see in the preview that it’s “looping” through something…
  • the animation will play, the pause, then play, then pause, etc. - ie., there is a pause between each loop

If someone could provide us with a step-by-step guide, I’d be truly thankful!..


#2

Join. Interesting too.


#3

anyone find a solution for this? :slight_smile:


#4

Hey friends - good news: this is pretty simple! You should be able to pull this off with the Loop option in your animation settings.

See my live example at http://looping-animation.webflow.io/ (preview link)

Let me know if you have any questions! @luxlogica @Barsik @ryan585


#5

Well I never! Thanks :slight_smile: