Jump to content
GreenSock

Philipp S

Toggle element visibility gets stuck on inline CSS

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

thanks for the demo.

 

One way to avoid this altogether is to use fromTo() tweens instead which will set the start and ending property values.

 

to clear the inline styles use clearProps

gsap.set([popup, close], { clearProps: "all" });

 

See the Pen BaJjdZZ?editors=0010 by snorkltv (@snorkltv) on CodePen

 

 

  • Like 2
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.
×