How to use interaction to animage/move the section not just it's contents

I’ve noticed that if I create an interaction to slide a section up or down, that it moves the contents of the section, but not the actual section. It’s kinda like moving the artwork on the wall, but frame stays. This is a problem for my design because it leaves an empty space in the middle of the page where the section is even though its content isn’t being shown. I tried to hide this empty space by moving the rest of the sections with it, but now the empty space is still at the bottom.

Is there any way to have the section move and “push” the other sections without creating some sort of hole in the layout?

Here’s my design for reference. The interaction I am trying to create is what you see when you click “contact” in the menu bar. What I don’t want to see is the checker background at the very bottom. When the contact section is visible, the bottom looks and acts the way I would like, but when the contact section is hidden the bottom looks bad. Hope that makes sense.

Thanks for any help!

In this instance, I would apply a size interaction on the section itself. Starts at 0px height and grows to Auto height.
You’ll need to make sure that overflow is set to hidden on the section and also do not apply padding to the section element. If you need padding, apply it to a div within the section element.

edit: actually, in your instance it would grow from 0svh to 60svh

Thank you! That worked. I also had to add a move interaction to the div box inside the section in addition to the size interaction on the section to get the UX I wanted, but it’s woking like I wanted now.

1 Like