How to ensure the style consistency of a backward and forward animated element when a breakpoint changes the size of its container?

[Charlene]

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.

See the Pen GReLjOw by charlene-bx (@charlene-bx) on CodePen

[mvaneijgen]

Sounds like a perfect use case for gsap.matchMedia()  https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/

 

Although I have to say that I can't see it breaking, but of course I don't know what "well displayed" means. I see an eye loop and a cross and no matter what I do with the screen size everything keeps working and toggling between, but if there was an issue gsap.matchMedia() could fix this, because it refreshes all the states when it sees a resize. Hope it helps and happy tweening! 

 

 

[Charlene]

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

See the Pen VwRNbdo by charlene-bx (@charlene-bx) on CodePen

[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...
 

See the Pen OJqGxgy by charlene-bx (@charlene-bx) on CodePen