Philipp S

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 https://codepen.io/philippstracker/pen/PoEZgXj

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" } );

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