Linking sec-id to button making interactions to work on double click

Design help Animations & Interactions
1

How to hide/show and scroll to the element on a single button click

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

2

Hey @Udayavani

Use a link block as the click trigger element for the interaction. Then connect the link block to an anchor. This will scroll to the target anchor on the page.

Then use click triggered animation to reveal the target. Use the 2nd click trigger if you only want something to happen on the 2nd click and not the first. Or you can have different actions on 1st and 2nd clicks.

Hope that helps. If you’d like further support from the community please include your projects read-only link and instructions on where to find the discussed elements inside the projects. Thanks in advance.

3

@matthewpmunger Thank you for your reply
But i need to add interaction to button when I am trying this it is scrolling down to specific division on second click of button.Can you please help me how to solve this.

4

Ok sorry I misunderstood your request. Please share your project’s read-only link so I can see the issue myself. Link is in my previous post. :point_up:

5

Hi matthewpmunger

Thank you for your reply

https://preview.webflow.com/preview/udayavanis-supercool-project?preview=3e2de0193790334a9f91c54cdf0d0105 this is my link in which i have created a button and trying to show slider2 and linked the slider id to the button to scroll to slider when it gets open on interaction.But it is getting open on 1st click and scrolling on 2nd click.please help me to solve the problem.Iam trying this from past two days.

Thank you.

6

Alright I see what’s going on.

1st Click

  1. Tries to scroll to slider-6 but can’t because it’s hidden
  2. Interaction reveals slider-6

2nd Click

  1. Scrolls to section-6

The solution is to place your slider into a div then give the new div the ID instead of the slider. Make sure to remove the ID from the slider. Make sure the button is connected to the new div under page-section settings. Then you should see the following

1st Click

  1. Scrolls to div and interaction reveals slider-6 simultaneously

That’s it. Hope that helps. Happy designing!

7

Thanku matthewpmunger it helped me a lot

1 Like