Streaming live at 10am (PST)

Show/hide and replace a section by another

Hello :wave: !

I’m trying to make the same interaction as the button on this link : http://mixdesign.club/themeforest/ramio/index-color-3-image.html

But didn’t find the solution.
I successfully make the show/hide interaction but can’t figure out how to replace the column with another (animated).

Please, I need some help haha :slight_smile:


Here is my public share link: LINK
(how to access public share link)

The right column should be Position Relative.
Two divs inside can be Position Absolute and full (so both divs are one above each other).
Move (Position) down the “Contact div” by 100VH.
Then set a Mouse click transition to a button element.
In the transition, set the “Contact div” to move down 100vh by default (timing - set as initial state) and moved to zero vh when clicked. For the upper div, set default to move zero vh, and move up -100vh when clicked.

I hope I explained myself well :slight_smile:

Hello Eli11,

Thanks so much
But that’s kinda hard to understand for me.
All my columns are position relative.

Is it possible to make a quick video ?
Because I tried to follow your steps but can’t get a good result.

I’m not sure how to make a video, in the meantime I created a project for you to copy.
If this will not help I will make a video.

https://preview.webflow.com/preview/forum-help?utm_medium=preview_link&utm_source=dashboard&utm_content=forum-help&preview=f07e4ee25bac33e321a75c5de6344ca4&mode=preview

Hi Eli11, sorry for the delay, I didn’t saw your answer.

I tried to copy what you did. Thanks !
I’ve got one last problem : animations don’t works.

Can you please take a look and explain me what’s going wrong ?
I understand few more things thanks to you.

Théo

@Eli11 Please, do you have few minutes to help me.
Will be really awesome.

Hello,
In the link I shared, the animation works fine. Just click out of preview mode and go back to preview.

If you have difficulties on your project, let me know what exactly and I’ll be happy to help

Yes, your animation work perfectly.
I tried to do the same in my project but while clicking on preview, nothing happens.
Can you please take a look and tell me what’s my mistake ?

Theo

Looks like it works fine in your animation, give them both the same Duration and Easing so both divs move the same.
Add a button in div2 and set animation2 to that button.
All done :slight_smile: