Show & Hide Elements on Click

Design help Animations & Interactions
1

Hi Guys! I watched the “Show & Hide Elements by Click tutorial by Webflow”. So I created this a click animation: Picture → click → show other picture → click → show original picture.

I did the same as the tutorial shows but I have two problems with the animation: 1. When I click the picture on the first click everything works fine. But on the second click nothing happens. I really don’t know why.
2. When you click the picture a few time in row there is some kind of lag. That shows for a millisecond both images.

Here is my public share link: https://preview.webflow.com/preview/presets-18e506?utm_medium=preview_link&utm_source=dashboard&utm_content=presets-18e506&preview=039af524f88a32a4f429c3709770d0ad&pageId=5f69f64657673113d4f3d7b6&itemId=5f6f52464e2a4c438c076306

2

For the second click to happen you have to click the same interaction trigger. Your interaction hides interaction trigger so you cannot click it anymore. Set trigger on a parent that holds both images

3

Thank you very much! That helps me a lot :+1:

I updated it and now it works. Do you also know why it shows both images for a millisecond after the animation starts again (third click)?

4

Here is the link to the updated version: https://preview.webflow.com/preview/presets-18e506?utm_medium=preview_link&utm_source=dashboard&utm_content=presets-18e506&preview=039af524f88a32a4f429c3709770d0ad&pageId=5f69f64657673113d4f3d7b6&itemId=5f6f52464e2a4c438c076306&mode=preview

5

Because you have to both show one and hide another element at the same time not one after another. Modify your interaction so that both actions happen simultaneously.

6

Alright, finally got it :smiley: Thank you very much!

1 Like