Hide/show interaction is very abrupt

Design help Animations & Interactions
1

Hi all, making a simple portfolio for a dear friend and I’m trying to create an “ease” effect that kind of works as follows

  • you click on a portfolio item, enlarged view “pops” up above, portfolio grid gently shifts down
  • you “x” out of the enlarged view, enlarged view pop up disappears and grid gently shifts back up to place
  • bonus, if one enlarged view is open and you decide to click on another portfolio item, the open view closes and the new enlarged view opens

I’ve been trying to use scale, opacity, size, and hide/ show and none of them seem to be working for what I’m trying to do. Is there a different, probably very obvious approach I’m missing?

Thank you very much in advance!

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

2

Hi there,

Here’s how to create a smooth pop-up effect with fade-in animation:

  1. Set up your pop-up element:

    • Set initial state to Display: None
    • Set Opacity to 0%
    • Position it appropriately using Position: Fixed or Absolute

  2. Create the interaction:

    • In the Interactions panel, add a new interaction
    • Choose your trigger (e.g., click, hover)
    • Add an Opacity animation from 0% to 100%
    • Add a Display action: None → Flex
    • Set your timing and easing preferences

  3. For smooth grid movement:

    • Select the grid elements
    • In the Style panel, add transitions
    • Set transition duration (e.g., 300ms)
    • Choose easing type (e.g., ease-in-out)

You can adjust the timing and easing of both the fade and movement animations to achieve your desired smoothness.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hi @valepop, I’d recommend doing this with a combination of size and opacity.

First, set all of the enlarged sections to height and opacity of zero. Then in your click interactio, set it to the original height with a transition time and smoothing setting that moves the way you want. (This gently shifts the grid down) Next, have the opacity fade to 100%. For closing the portfolio item, set opacity to zero first, and then set the height back to zero with smoothing.

If you want to make sure that any open portfolio items close when the next one is clicked, here’s a tip. You can run the close animation on the whole class of portfolio items first, then open only the item that was clicked.

4

thank you so much! that worked :slight_smile:

1 Like