Charlene

I've found this solution: So I clean all props for each elements when tooglind the dimension of the wrapper but it look a quit messy... Maybe I should think about this new context.revert() to perform same logic... https://codepen.io/charlene-bx/pen/OJqGxgy

Hi @mvaneijgen, Thanks for your response, but in fact the problem isn't related to media queries. If I change the size of my element via a button the problem is the same. Here a forked version with a button to toggle the size https://codepen.io/charlene-bx/pen/VwRNbdo

Hello GSAP, I have an icon animation that juggles between two states as well as a breakpoint definition that changes the dimension of its parent element (via a class exchange). The problem is that when the parent's class is changed, and therefore its dimension, the icon is no longer correct. It seems to me that, ideally, CSS should be managed via GSAP, but my component is responsible for displaying different icons, and their sizes are defined via a props (so via the parent). The fact that the size (and therefore the props) changes is exceptional, so I can hardly envisage rewriting all my components. Is there a way to fix this problem without changing the overall logic of the element? Thank you in advance, in the hope that someone can help me out of this trivial but endless problem.

Many thanks for this detailed explanation! I do understand better where the problems are and this demo will be very useful! And indeed, maybe I should try morphSVG to reproach myself with the desired animation although the demo would do just as well! Thanks you as always!

Hello again, I'm trying to make this little animation onClick where you also need to animate svgOrigin to get the desired effect. But the transform origin point is unexpected. On first click, the magnifying glass should convert to a cross, and on second click reverse to it's initial state, and so one. Thanks for any help as always!

Indeed, It's exactly the effect that I want! I'm really gratefull! So my issue was that instead having one timeline for each click I've one global timeline with multiple tweens in it?

Hello all of you, I'm trying to create an icon animation where the two lines that make it up must always rotate in a clockwise direction, regardless of the animation state (forward or backward). Despite the need to create the simplest possible demonstration, I've still used the VueJS3 Framework, because I wonder if the unexpected result I'm getting isn't somewhat related to the way the functions are launched. I'm really having trouble understanding why I'm getting the result I'm getting. If anyone can shed some light on this, I'd be very grateful! - Why the animation seems incomplete at the first click - Why on second click there is just one element moving up - Why on all next click the animation seems to be played at reverse Expected result: On first click, the "chevron" icon rotate clockwise to look up 🔺 On second click, the "chevron" icon still rotate clockwise to retreive is initial look down 🔻 and so one. So the icon has two state (up and down) but toggle it by rotating always clockwise.

Thanks a lot, Indeed, that was why i'm trying to do and now, I understand why it doesn't work as expected! 🙏

Hello, I'm new to GSAP and have a problem when I want to animate an SVG element. My SVG is transformed via CSS to get the desired design (maybe it's not already a good starting point?) and I'd like to animate its rotate property. To do this, my transformOrigin must be the center of my SVG, as specified in the stylesheet and as it's normally the default value from GSAP, but GSAP animation seems to interpret it in a different way. If I look at my element with devTools, I see that the transformOrigin is '0 0 0', whereas I've set it to '100px 100px 100px'. What's the matter here? Thanks in advance to shed some lights on this