Philipp S
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Philipp S
-
-
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
See the Pen gOoPWJq by philippstracker (@philippstracker) on CodePen
Toggle element visibility gets stuck on inline CSS
in GSAP
Posted
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