Thahir Posted December 2, 2022 Share Posted December 2, 2022 I am working on a card hover animations and a click animation on the same. I am not sure if this is the proper way to do it minimal code. I would appreciate if anyone helps out with a proper way to do it without using a fixed heights. When i click on the "Click to see Preview desc" link the whole description container should be opened(it is happening) and it should be closed only if i click again the same link(prevent getting hidden the description container after hovering out form the card) and it should be closed when clicking outside of the card. Link to comment Share on other sites More sharing options...
Cassie Posted December 2, 2022 Share Posted December 2, 2022 Hey there Thahir, This looks fine to me. If you really want to avoid using fixed heights, another option could be to use FLIP to animate between an open and a closed state?https://greensock.com/docs/v3/Plugins/Flip/ See the Pen JjXqMZK by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted December 2, 2022 Share Posted December 2, 2022 It may also be helpful for you to take a look at our React guide - specifically gsap.context Link to comment Share on other sites More sharing options...
Thahir Posted December 3, 2022 Author Share Posted December 3, 2022 Hey Cassie, Thank you for the quick response. I will try with gsap.context and the codepen animation example is also a better option to show up the details/description. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now