Philipp S Posted March 17, 2022 Share Posted March 17, 2022 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 More sharing options...
Carl Posted March 17, 2022 Share Posted March 17, 2022 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 2 Link to comment Share on other sites More sharing options...
Solution Philipp S Posted March 17, 2022 Author Solution Share Posted March 17, 2022 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 More sharing options...
Carl Posted March 17, 2022 Share Posted March 17, 2022 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 More sharing options...
Philipp S Posted March 18, 2022 Author Share Posted March 18, 2022 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 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