Jump to content
Search Community

Not working update position items on resize

GromNN test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

  • GromNN changed the title to Not working update position items on resize

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...