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

What is Framer? Join the Community
Return to index
Amrit Mazumder
Posted Aug 24 - Read on Facebook

What is an effective way to animate and update Layout?

Scenario: I have a layer called 'container' with 5 vertically stacked boxes. Each box expands to _some_ height. I want to then push the appropriate boxes down, and update the
'container' height with an animation.

I've tried 2 approaches — with and without an animation. Without animations, everything works perfectly. With Animations, it's super buggy and I think its because the expanded box doesn't reach it's new height quickly enough, and the other boxes don't know what to do.

Is there a better way to go about this?

Project — https://framer.cloud/zbwTg

4 Comments

Amrit Mazumder

Any tangential tips on Layout stuff are also very welcome 🙂. I prototype for desktop tools, and I spend ~45% of my time fixing layout things

Jordan Robert Dobson

Events. Have each box have a buddy layer it reports to OR listens to.

layer1.on “change:height”, (var1, var2, var3) ->

layer2.y = layer1.maxY + 20

Sorry I don’t remember what the var1, var2,... are.

Jordan Robert Dobson

https://framer.cloud/ramCB

I believe this is what you want.

Steve Ruiz

Hey, I wrote a guide for exactly this design. https://blog.framer.com/made-in-framer-accordion-list-8d5bc2eaeee7

Read the entire post on Facebook