Trouble with show/hide interaction functionality

Design help Animations & Interactions
1

Hi all!

I’m trying to create this show/hide toggle interaction:

A few problems:

  1. it seems to be just appear instead of easing “open” as I set in the interactions

and

  1. when I click to close it, it seems to be hung up on the padding of the “hidden-text” block before it blinks closed.

What am I doing wrong here?

Here is my public share link:
https://preview.webflow.com/preview/test-show-hide?preview=60419bb08bf2e8155d9f1d4b135a35e0

2

Hey, it’s because you use top and bottom padding on div block “hidden-text”. Just set them to 0 and Overflow is Hidden. Now check :))))
If you need space around your text - increase top and bottom margin of your paragraph.
Next time use x-ray mode))

1 Like
3

Ah yes, thank you helg! That made it work for when the box is collapsing back (hide) but the box still blinks in when I first click the button (to show). Any ideas why this would be?

Here’s the updated interaction: http://test-show-hide.webflow.io/ (same public share link above)

4

Hi @adiggy, try adding some px height to the hidden text div and see if that helps, i.e. 200px.

I hope this helps!

6

Thanks for the idea, @cyberdave! Adding it to the interaction itself worked — 2017-03-04_01-57-11.png — although it’s not ideal since I want this interaction to be responsive, so what would be a way to do that without bringing a precise pixel height into it?

It’s confusing because in the video I embedded originally, it said to set the interaction height to “auto” and it seemed to work in the video … :confused:

Thanks so much for diving in and helping! It means a lot! :slight_smile:

7

Hi @adiggy, take a peek at a video I made, does this help?

I think that adding 100ms ease to the first step of the click trigger will help, sometimes interactions can be a little tricky that way and one interaction cancels the other out if run at the same time with same transition speeds. It probably can be looked at more in general I think, but this should help.

8

Thanks so much cyberdave! You rock! This is super helpful. Thank you for taking the time to show me what’s what!

9

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