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

What is Framer? Join the Community
Return to index
Jurian Rokven
Posted Jan 22 - Read on Facebook

Hey everyone,

I have a question about animating multiple layers. Can i create a function to animate multple layers at once? i've tried this but it doesn't work:

animationA = new Animation({
layer: layerA,
properties: {x:0}
curve: "cubic-bezier(2, 1, 0.2, 1)",

layer: layerB,
properties: {x:0}
curve: "cubic-bezier(2, 1, 0.2, 1)",

})

Any suggestions would be really helpful. :)

8 Comments

Koen Bok
Jurian Rokven

This would help if the layers had the same animations, but i want to make a function where every layer has a custom animation. I made a an example for what i'm trying to create, but this animation is a small part of a bigger prototype. I could just use this but i would like to make more readable for myself.

here's the example: http://share.framerjs.com/1k0ua5xdhhug/

Ps: thanks for the new share function, it's pretty awesome!

Koen Bok

So this prototype has unique values for properties and delay so there is not much more to combine there. The only thing I would do is set the 3x used curve as a default.

http://share.framerjs.com/b527lo001qgx/

Jurian Rokven

So there's no way that i could make this bundle of animation to one function? This would be helpful for example if i'd have an animation that uses multiple layers. It would start animating when i clicked a button OR if i swiped somewhere. So the animation would be totally the same but i would have to write it 2 times. Once for the click event and once for the swipe event. This is a bit impractical. i'd like to make the animation in a function so i could just use *animationfunction*.start() on the click event or the swipe event.

I hope i explained this clearly, i'm not a developer. I'm sorry for the inconvenience.

Ryan Gonzalez

Hey Jurian, you can simply group custom animations together into a function (for example, something like "animateAll") if you want to be able to reuse it in different event handlers: http://share.framerjs.com/bzbwlzvii8qn/

Jurian Rokven

This was exactly what i was looking for. And it's so simple, haha. Thank you very much Ryan Gonzalez!

Ryan Gonzalez

No problem!

Koen Bok

Ah I just completely misunderstood what you were trying to do, I'm sorry!

Read the entire post on Facebook