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

What is Framer? Join the Community
Return to index
Karol Piwowarczyk
Posted Jan 12 - Read on Facebook

I want to create simple (web) chatbot without any plugin. Therefore I have few question about it.

1. How can I add next element always under previous element independly of the size of the previous element? (example —> second element should be always 40px underneath

2. When last element is too height, scrollComponent should move to top to show whole element

I add a picture to show myidea :)

5 Comments

Jonas Treub

You'll have to calculate the sizes of all previous elements. How are you creating a single bubble?

Steve Ruiz

I'm sure there are easier ways; but here's how I did this.

First add the objects to an array, then create a global variable 'v'. Create a loop that takes each layer in the array, sets the layer's y equal to v, then add the layer's height to v, along with a value for however many pixels you want between the layers.

Throw this loop into a function and call it whenever the layers change. Animation is also possible using this scheme. It may be more framerly to use parents and children to create your array based on a particular layer's children, rather than an arbitrary array.

JinJu Jang

http://share.framerjs.com/wvix5s7vnnt0/
This isn't 100% matching to your design, but it might be helpful for you to check this prototype. :) (For aligning Y pos based on previous layer)

Sergey Voronov
Read the entire post on Facebook