Animated cog

Ask the community
,
1

Hi, I’m trying to make an animated cog for loading screens. So far, I’m here:

$w.onReady(function () {
    let timelineReset = wixAnimations.timeline({"repeat": -1, "repeatDelay": 0});
    $w.onReady( function () {
        const myImage = $w("#vectorResetMenus");
        timelineReset.add( myImage, {
           "rotate": 360,
           "duration": 1000
           } )
        timelineReset.play();
});
});

My problem is that the animation stops momentarily in each cycle and then starts again, although I set repeatDelay to 0. Could you help?

Thanks.

2

You can try:

timelineReset.add(myImage, {
"rotate": 360 * 100,
 "duration": 1000 * 100
})

But if it were me, instead of using wix-animation for preloader, I’d just put a light animated GIF (or a light html spinner in an iframe).

3

This trick fixed the circular pause (how did this happen actually? can’t find anything relevant in documentation) but now that I have full motion, I see that… it accelerates!!!

4

I used an ‘easing’ Animation Attribute and it’s decent now in terms of acceleration. Case solved.