Masha555 Posted February 9, 2023 Share Posted February 9, 2023 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 More sharing options...
Rodrigo Posted February 9, 2023 Share Posted February 9, 2023 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! 1 Link to comment Share on other sites More sharing options...
Masha555 Posted February 10, 2023 Author Share Posted February 10, 2023 I added a link to a minimal example Link to comment Share on other sites More sharing options...
Rodrigo Posted February 10, 2023 Share Posted February 10, 2023 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now