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:
- they all end exactly in the same state where they started - ie., the end keyframe is the same as the first keyframe
- 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!..
