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

What is Framer? Join the Community
Return to index
Paul Matthijs
Posted Aug 26 - Read on Facebook

I'm running into trouble while trying to sequence a lot of little animations, all with different timing and properties. What is best practice for doing this?

For instance, I need to start animation on three layers at the same time, with different properties and timings. When all that's done I need to animation just one of those layers again, with another set of properties and timing.

Can't use states, as they share timing properties within a layer. Tried creating animations for every event, but run into problems triggering one animation while the previous is still running. Or should I just use Utils.delay for that?

6 Comments

Jordan Robert Dobson

Check out the animation work by Isaac Weinhausen. He has a post in this community if you do a search.

Jordan Robert Dobson

Also have you tried using an Animation object? And then detect when that object is complete?

myLayer.animate curve:....

VS

myAnimation = new Animation layer: myLayer ....

Then...

myAnimation.on Events.AnimationEnd, -> #FireNextAnimation

Doing all this by memory on my phone... So triple check things. But I think this should work.

Isaac Weinhausen

Take a look at https://github.com/isaacw/framer-animation-collections

I wrote this library to address your exact use case. Take a look at the readme for an example, and if you download the repo, definitely checkout the examples folder.

The library needs some more work, but should work.

Isaac Weinhausen

If you want to do something after a whole set of animations have been completed, then you might want to use my AnimationSet object. You can attach listeners for the AnimationEnd event, which won't get called until all the animations in the set have been completed. If you're dynamically timing animations, this can be really helpful.

Otherwise, if all you need to do is simply chain together two animations, then you'd probably be better off just using a plain old animation object like Jordan Robert Dobson mentioned.

Read the entire post on Facebook