Jump to content
Search Community

Update the animation after the change DOM

Masha555 test
Moderator Tag

Recommended Posts

I am creating a gallery of images using css flex and ScrollTrigger technology; After changing the width of the screen, the new card does not immediately occupy a new place images gallery , only after scrolling it is visible after scrolling. Maybe there is a method to update the animation after changing the screen width? The gallery is unstable...  I think we need to use the update() method somewhere.  Please help me .  I use a framework  Angular. 

link to the minimal example

Link to comment
Share on other sites

Hi @Masha555 and welcome to the GreenSock forums!

 

Unfortunately the links you provided are broken.

 

Please create a minimal demo in order to get a better idea of what you're struggling with. The simpler the demo, the better, just a few divs showing the issue. ScrollTrigger does has a refresh method but that runs when you resize the screen so the elements should be in their right position based on the animation's progress, considering the scroll position after the resize. Are you using the latest version of GSAP and ScrollTrigger? Also be sure to use the same version of the GSAP core and ScrollTrigger (currently 3.11.4).

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hi,

 

Thanks for the demo, but I see everything working the way it should be. I can't spot any issues in the Stackblitz example you provided in the latest Firefox and Chrome in Ubuntu 20 (I can test on Ubuntu 22 later but most likely the result will be the same):

https://i.imgur.com/m8LlNDX.mp4

 

Maybe the problem stems from something else in your setup. As I mentioned in my previous post, ScrollTrigger automatically runs a refresh method that updates the start and end points of all the ScrollTrigger instances and updates their progress according to the scroll position after the resize event. As you can see in the video that is exactly what is happening. Maybe you have a resize event listener somewhere that is interfering with your ScrollTrigger instance.

 

Another option is that you could have a src set in your images so the elements are not there when ScrollTrigger does it's calculations. Another option could be to add a load event in order to wait for the images to be loaded and then run the refresh method manually, something like this:

window.addEventListener("load", () => {
  ScrollTrigger.refresh();
});

Hopefully this helps.

Happy Tweening!

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