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

What is Framer? Join the Community
Return to index
Kai Daniels
Posted Feb 01 - Read on Facebook

Hey all, is there any way to have two layers animate, for instance translate in the same direction (but delay one layer for some duration) and then have that same layer start animating, but at the same rate of acceleration/derivative of the other layer? I'm trying to go for a "push effect" and am trying to recreate the calendar featured in the Material Design reel.

Video Reference:
http://youtu.be/Q8TXgCzxEnw?t=26s

1 Comments

Koen Bok

You can do them but for effects like these we are missing something to describe layout relationships. With that you could express your layout as a set of rules and the code would "solve" your layout based on it.

For example, here you would say (simplified)

- Total calendar width = x
- Size of hovered column = dependent on mouse location
- Size of other columns = divided over the rest, the one closest to mouse being the biggest

The OSX dock is another example of this.

Apple has a system like that called AutoLayout but I think we need something a tad simpler. Ralph has some great examples of a system that we could base it on: http://iamralpht.github.io/constraints/

Read the entire post on Facebook