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

What is Framer? Join the Community
Return to index
JT DiMartile
Posted Jul 27 - Read on Facebook

If you are trying to do Material Design animations the following are the main easing values for your bezier-curves.

start with:

materialLayer.states.animationOptions =
curve: "bezier-curve"

When something exists on screen already and moves to another position on screen, 40% out of first frame and 80% into second frame:

curveOptions: [0.4, 0, 0.2, 1]

When something comes from offscreen it has 0% out of the first frame and 80% in on the second frame:

curveOptions: [0, 0, 0.2, 1]

When something leaves the screen it has 40% out of the first frame and 0% in on the second frame:

curveOptions: [0.4, 0, 1, 1]

2 Comments

Aaron Carámbula

This will make a nice snippet. Thanks!

Koen Bok

Thanks JT!

Read the entire post on Facebook