Button Disappears After Clicking

Hi guys,

I trying to make an interaction wherein a “button” will be clicked, and then a dom element will pan to the left. I was able to achieve this without a problem. But, I noticed that my “button” disappered after the CLICK is done. I cannot seem to figure this out.

Also, I wanted to do another click which will make a DOM element visible / or change opacity from 0 to 100% with the same button.

I’m a little lost now :slight_smile:


Here is my public share link: https://preview.webflow.com/preview/interactions-tutorial?preview=2f05b73708c0b9c66f5a066bfe6a8ba7
(how to access public share link)

You should consider using the Slider component to achieve your desired effect.

Good use of interactions on your site - the problem you are running into is because your button (“forward”) is set to affect bg-wrapper… but the button is inside bg-wrapper! This means the button gets the same treatment as bg-wrapper.

It gets more complex with interactions + second-click interactions to achieve your desired result, so I highly recommend you explore the use of Slider. Also take a look at the Tabs component - that might work, too.

These components are found on the left menu, as pictured here:

Best,
Christopher

1 Like

Thank you sir. My intention is to move the background, and them have another DOM ELEMENT appear which is by default at 0 opacity / or hidden. That’s why I resolved to this method.

Let me try putting them in a different DIV and see if it works.

@ctrav

Looks like it worked. I placed my “clickable doms” in a different DIV.

Time to explore more about this Interactions thing. I’m still a little confused particularly on the USER INTERFACE of WEBFLOW itself. I find it a little cumbersome in the part on choosing which ELEMENT should be AFFECTED.

thanks

1 Like

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