This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Cemre Güngör
Posted Apr 24 - Read on Facebook

What is the most code-efficient way to make looping animations in framer? (Aside from chaining animations with on "end") Tisho Georgiev Koen Bok

13 Comments

Koen Bok

utils.interval ?

Koen Bok

Depends if you want to do A, B or A, A loop, if you know what I mean.

Cemre Güngör

Just A loop :)

Cemre Güngör

I was just thinking that if I could reuse the CSS animation to just repeat it

Koen Bok

Or shall I add a repeat: x keyword to .animate ?

Cemre Güngör

I wonder if that'd be the easiest, we could just pass that off to the CSS animation definition (which supports 'infinite' as well) and it'd run until we stop it

Koen Bok

Another cool utility would be something to chain animations into one animation:

longAnimation = new ChainedAnimation([animationA, animationB])

Cemre Güngör

that would be cool too, thought for complex stuff like that, i think it's ok to write a bit more code :)

Johannes Eckert

the repeat keyword would be awesome, do to stuff like rotating or pulsating activity indicators

Johannes Eckert

I don't know how much work an alternate property means: having the animation .reverse() at the end for an easy loop.

Tisho Georgiev

Cemre, I'm not sure what you meant by code-efficient, but your suggestion about essentially having control over animation-interation-count through the animation API sounds good to me. A pull request would be good :)

Koen, I'd love a way to create animation sequences (new AnimationSequence is better than ChainedAnimation IMO), but maybe in a way that's a little more flexible than what you've described. A way to specify positive/negative delays between subsequent animations would be essential to me.

Koen Bok

Don't bother with the pull request. I'm on it. I like AnimationSequence better too.

Gary Jacobs

Don't know if it's efficient but utils.interval(time, function) worked for me. Used it to loop a count from 1-30

http://fromtheloft.com.au/prototypes/post04Touch/index.html

Read the entire post on Facebook