Not working update position items on resize

[GromNN 0 Likes (Newbie)]

Good afternoon. When resizing, the position of the elements is not updated. Items appear in reverse order.

In this video, at first the elements move as needed, then when the window width changes, they begin to overlap each other, but I wanted them to also take their initial position

 

https://ru.files.fm/u/5xfqt7wm5

See the Pen eYLbWzw?editors=1010 by Chelovek52 (@Chelovek52) on CodePen

[Rodrigo 5,420 Likes (Superhero)]

Hi @GromNN and welcome to the GreenSock forums!

 

I noticed that you're not doing proper cleanup in your effect hook. Your codepen example doesn't work because you're not rendering any React component into the DOM, you're just exporting it.

 

When using GSAP in React or a React based environment (such as Next, Gatsby, etc) we recommend using GSAP Context:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

But in this case, since you want to run your animations based on the screen size, GSAP MatchMedia is a better option, since it's a wrapper for GSAP Context with the ability to add responsive based code to your setup:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Also take a look at the resources in this page in order to learn the recommendations we have to use GSAP in a React environment:

 

Finally you can take a look at the starter templates we have for using GSAP with Next in order to get a better grasp for using GSAP in a Next app:

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

This one uses ScrollTrigger:

https://stackblitz.com/edit/nextjs-5cm4qn

 

Hopefully this helps.

Happy Tweening!

[GromNN 0 Likes (Newbie)]

Thank you very much for the quick response! I will study, I will unsubscribe with the results.