Streaming live at 10am (PST)

Effect of (Move) Interactions on Neighboring Objects


#1

BACKGROUND: I have a div block with a text header, paragraph and an image (see Image A below). I have created interactions to make the div block expand to show extra text when a "More..." button is clicked. To do this my interactions make certain objects visible and moves them around.

PROBLEM: I'm now running into issues with how the interactions are affecting the position of nearby objects. In the example on Image A below I have the div block with the interaction and it's clone below it. When I activate the interaction in the top block (click on "More...") I want it to just push the bottom div block down entirely. This happens but the second block gets pushed down too far (see Image B). I can't figure out what is dictating how far it gets pushed down.

My browser is Chrome 42.0.2311.90 and my public link is: https://preview.webflow.com/preview/andrewtrujillo?preview=2d5bb489f7f1e8dba90edaf4889e3fa4

Any advice would be awesome, thanks!

Image A


Image B


#2

Hi @mrtruji, something like this may benefit from having the wrapper element change height from px to auto and then back to px.

This demo may be helpful:
Demo: https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Show/Hide on Click

​I hope this helps. smile


#3

Thanks. The demo site helped a lot!


#4