Jump to content
Search Community

Toggle element visibility gets stuck on inline CSS

Philipp S test
Moderator Tag

Go to solution Solved by Philipp S,

Recommended Posts

I'm trying to animate a popup using `gsap.from(el, {opacity: 0})` (to show the popup) and `gsap.to(el, {opacity: 0})` (to hide the popup again)

 

However, I'm a bit stuck here because the popup stays hidden after calling the `gsap.to(el, {opacity: 0})` method the first time.

Obviously, this method adds the inline CSS "opacity: 0" to the popup, so the following `gsap.from(el, {opacity: 0})` call does not detect any changes.

 

Is there a way to remove the inline CSS again that was added by gsap, so the next call to `.from()` starts from the initial state? Or is there a better/preferred solution to this kind of use-case?

 

Thanks :)

See the Pen gOoPWJq by philippstracker (@philippstracker) on CodePen

Link to comment
Share on other sites

  • Solution

Thanks for the prompt response and the suggestions 👍

 

I actually needed to combine both solutions to get my animation to work consistently:

 

tl.fromTo(close,
    { duration: 1, scale: 0.5, opacity: 0 },
    { clearProps: "scale,opacity" }
);

 

Link to comment
Share on other sites

hmm, I'd strongly recommend setting the to values explicitly like

 

tl.fromTo(close,
    { duration: 1, scale: 0.5, opacity: 0 },
    { scale:1, opacity:1, clearProps: "scale,opacity" }
);

your code may do what you think it should now, but it's going to be very hard to troubleshoot down the road. just a suggestion

 

Link to comment
Share on other sites

You're right, my approach might be a little error-prone.

My concern was, that people are using my product with custom CSS to change opacity/scale of elements with the :hover state.

 

But I've solved this by adding a new wrapper element to the animated elements - that way, the close button can still be customized via CSS and the animation will always work as expected. Here's my new/working pen

 

See the Pen PoEZgXj by philippstracker (@philippstracker) on CodePen

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...