Hide & show Interaction

Design help Animations & Interactions
1

Hi there,

I am new to Webflow and I am having some difficulties with the Hide & Show interaction. I watched the tutorial on this matter, but it seems outdated since my panels show slightly different options. Also I am not a pro yet, so this could also very well be the problem.

My issue:
I am trying to create a simple portfolio website. The homepage basically should be a list of titles of projects. When clicking on them, some images should appear as an overview of the project (future lightbox thumbnails). I sort of managed to have them not appear at first and appear as I click on the title, but it does not run smoothly at all. The content should show up with ‘ease’ and not abruptly. Also some titles/links seem to affect the wrong content…

If somebody could help me out, that’d be great.

My page:
https://preview.webflow.com/preview/claartjes-portfolio-website?preview=4da5831f5d2292629dca912b3eb4d8c0

Thanks!

2

Hi @Claartje_Barkhof,

Awesome! Glad you’re using Webflow.

I found a solution that may be helpful which you can view at the following: https://drive.google.com/file/d/0BynZs0dQwPd_anRzT1NMUjVwdWM/view

What I did was:

  1. Make the div wrapping around the images initially 0px, and overflow hidden
  2. Then, I created an interaction that would ease the div to Auto on click.

I also noticed that some of the titles/links were affecting other interactions.

Quick question: do you have any custom code that may be interacting with these elements?

Hopefully this helps :blush:

3

Thanks so much, very helpful!

1 Like
4

Hi micahryanhtml,

Another question about this feature. It works now, but the ‘eas-in-out-back’ does not run very smoothly,
what could be causing this?

https://preview.webflow.com/preview/claartjes-portfolio-website?preview=4da5831f5d2292629dca912b3eb4d8c0

Thanks in advance,

Claartje

5

Hi @Claartje_Barkhof,

Definitely feel free to use any combination of transition times and easing that fit the interaction that you would like to create.

The following link is a screen capture of me changing the easing to Ease: https://drive.google.com/file/d/0BynZs0dQwPd_WmJaY3RSc016V1k/view

Hopefully this helps :blush:

6

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