Advanced CSS Animator Support Product Page


Rotate function: 'loop': 'infinity' command does not work

Asked 26 Aug 2013 14:26:32
has this question
26 Aug 2013 14:26:32 allison bruce posted:
When using the Rotate function, the 'loop': 'infinity' command does not work if the animate start point is set at Auto-detect. The infinite loop does work of the animation is set to start at a specific point, but I want my animation to start from where it last stopped.

Example: loop does not work, but animation will restart from where it ended ...
onclick="dmxAnimate('#rotateDIV', {}, {'rotate': '+=-270'}, {'duration': 3000, 'easing': 'linear', 'loop': 'infinity'})" value="Rotate"

Example: loop works, but restarts at 0 each cycle ...
onclick="dmxAnimate('#rotateDIV', {'rotate': '+=0'}, {'rotate': '+=-270'}, {'duration': 3000, 'easing': 'linear', 'loop': 'infinity'})" value="Rotate"

Thanks for any help you can give!


Replied 26 Aug 2013 14:33:52
26 Aug 2013 14:33:52 allison bruce replied:
I should clarify a bit. I want an object to loop forever, but have a button for the user to stop the animation at any point in the rotation, and then to be able to restart the animation where it left off. I can get everything to work except that when the animation is restarted, it either jumps back to zero when restarted, or completes only one cycle.
Replied 27 Aug 2013 09:17:23
27 Aug 2013 09:17:23 Teodor Kuduschiev replied:
Hello Allison,

Please provide a link to your page, where we can check the issue.
Replied 27 Aug 2013 14:42:31
27 Aug 2013 14:42:31 allison bruce replied:
Thank you so much for you reply!
I have posted a simple example page:

Here I have set the start positions for the rotate animations to 0:

onclick="dmxAnimate('#rotateDIV', {'rotate': '+=0'}, {'rotate': '+=-360'}, {'duration': 12000, 'easing': 'linear', 'loop': 'infinity'})" value="Rotate"

but I would like the animation to restart from where it was stopped. I have tried setting the start point to "auto-detect":

onclick="dmxAnimate('#rotateDIV', {}, {'rotate': '+=-360'}, {'duration': 12000, 'easing': 'linear', 'loop': 'infinity'})" value="Rotate"

In this case the animation does start from where it stopped, but the infinite loop does not work and the animation stops after one completed cycle.
Replied 11 Sep 2013 16:55:11
11 Sep 2013 16:55:11 allison bruce replied:
Teodor, Is there a possible solution to the bug mentioned in this thread? I need to know if there is not so that I can pursue other options for my project and hopefully get a refund for my purchase of Advanced CSS Animator.

I have posted a simple example page that will hopefully show what I'm trying to do:
Replied 12 Sep 2013 08:58:03
12 Sep 2013 08:58:03 Teodor Kuduschiev replied:
Hello Allison,

Unfortunately it is not possible the current position on the circle to be determined and actually this is not a bug, but it is how the extension works.
Replied 12 Sep 2013 22:15:28
12 Sep 2013 22:15:28 allison bruce replied:
I guess I'm confused as to why the repeat forever command stops working when you use "auto-detect" for the starting point of the rotation. The auto-detect setting works fine for rotations - it will start up the animation exactly where it was stopped, but for some reason it causes the repeat forever command to break.

Reply to this topic