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 :)
You'll have to calculate the sizes of all previous elements. How are you creating a single bubble?
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.
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)
You can check how i done here https://github.com/mamezito/FramerMessengerChatBot
Or here without ioskit module https://dribbble.com/shots/2751070-Google-allo-chat-recreated-with-FramerJS-and-Firebase