Streaming live at 10am (PST)

Interaction scale from top to bottom?


#1

I try to made interaction on a div to scale from top to bottom not from center like in my site: http://gvidi.webflow.io/. How can I do it?

Thank you
Nadine


#2

A div expands from the middle if it's vertically centered, or if its parent is vertically centered. You need things to be anchored to the top (default, ie no vertical positioning) to get your div to expand to the bottom.


#3

thanks for your help.
I am new on webflow and I'm not sure I understand what you mean. Perhaps because of my English is not very good. I redid a test : https://webflow.com/design/test-draw-line putting just a div directly into the body by not centered anything and I apply interraction but same problem. I can not have the line to scale from top to bottom. Could you give me an example that I could open in webflow to see how you do.


#4

Hi @nadine, could you share the read-only link to the site? http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance :wink:


#5

Voilà: https://preview.webflow.com/preview/test-draw-line?preview=e3ce71823c3cf18d91fe929526c6813f

Thank You


#6

Hi @nadine, try this, put the line element inside of another div or section. Give the parent element a class and make the parent div position relative and give the parent element some height:

Next, select the line class and set it's styling to have absolute position with a bottom anchor. I added 50% left offset to center the line inside of the parent element

Now select the line class and change the initial appearance on the scale interaction assigned to the line class.

Finally, update the load step in the interaction so that on page load, the height of the line is changed to 500px:

The end result should be the line appearing to grow from the bottom of the parent elment to the top of the parent element.

I hope this helps, if not, I am happy to take another look :slight_smile:


#7

wow it works really well, thank you very much !


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.