Jump to content
Search Community

Show content on hover

amitr95 test
Moderator Tag

Recommended Posts

I have a block which contains content that appears on hover. The way the effect should work is:

 

  • .hoverCard shows base content by default (content in .hoverCard__showOnHover is hidden)
  • User hovers over .hoverCard at which point .hoverCard__showOnHover reveals it's contents and the .hoverCard__body translates up (giving it that "open" effect)

 

A visual of the above can be seen in my demo, but I cannot get the animation to work neatly.

 

The issue(s) I'm running into are:

 

  • using visibility: hidden, opacity: 0 and height: 0 still reserves space for .hoverCard__showOnHover. Meaning that if by default, .hoverCard__body has 40px padding at the bottom, and .hoverCard__showOnHover is 100px in height, 140px space can be seen on .hoverCard without the user hovering
  • The only way I know can prevent the reservation of space is by using display: none. However, when I hover over the card, I need to give it a display property to showcase the content, which gives the card a jumping effect (as the height is being introduced on hover). In addition to this, my card also grows in height (I want the effect of content being revealed and opening upwards, rather than growing .hoverCard as it does in the demo)
  • To try resolve the above, I've tried giving .hoverCard__showOnHover height gradually by using GSAP.  But no luck, as it still presents the above issues

 

Is there a way using GSAP I can tackle this?

 

 

See the Pen jOeLYNO by amit_rai95 (@amit_rai95) on CodePen

Link to comment
Share on other sites

Hi,

 

Sorry for the late response, this fell through the cracks 🙏

 

There are several issues in your setup. The first one is this:

* {
  transition: all 0.5s ease;
}

This is a big NO-NO in web development and also when using GSAP. This tells the browser that every element in the DOM has a transition for every property that gets updated. That is going to create problems one way or the other, even if you don't use GSAP. I strongly recommend you against doing that.

 

Then you have some GSAP instances that are creating some animations while at the same time you are changing the same properties of some elements on hover with the CSS. This for example:

&:hover {
  .hoverCard__body {
    transform: translateY(-75px);
    .hoverCard__showOnHover {
      opacity: 1;
      visibility: visible;
      display: block;
      height: auto;
      transform: translateY(75px);
    }
  }
}

You are changing the height of the element to auto while using GSAP to animate the height of the same element, while having the rule that gives every element in the DOM a transition for every property.

 

Unfortunately we can't debug complex and tangled-up examples like this, we just don't have the time resources for that.

 

I cleaned up your code, removed some CSS that IMO is unnecessary and came up with this:

See the Pen gOBoQxM by GreenSock (@GreenSock) on CodePen

 

I'm not sure if this is what you're after or not, but as I mentioned I'm having a hard time following what you're trying to achieve here. If this doesn't help, please be as specific as you can about how the animation should work, describe it in simple words and if possible provide a link to an site where this works in the way you intend.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...