My animation get stuck when i try to do refresh the page or even when i try to change the viewports.

[Mohit Pain]

Hello everyone,

I'm new to GSAP, and I'm trying to make a website using it. However, I am facing some problems.

1. When I refresh the page, my animation gets stuck and nothing happens. Instead of restarting my animation from the beginning, it gets stuck at the footer. I have to refresh the page 3 to 4 times to make it work properly. Please tell me how I can solve this problem. I want my page to start from the beginning when I refresh, and I also want it to start from the beginning when I change viewports.

2. My animation lags a lot while scrolling down. It works fine in the Brave browser, but it lags in the Chrome browser.

 

sorry im not able to put my whole html,css file in codepen because of my images . i have posted my js please look at it

 

 

 

See the Pen ZENBOoP?editors=0010 by Mohit-Mishra-the-styleful (@Mohit-Mishra-the-styleful) on CodePen

[Mohit Pain]

guys please help

[Rodrigo]

Hi @Mohit Pain and welcome to the GSAP Forums!

 

Please do not add more post in a thread expecting to get a faster response. We do our best to give the best possible answer in less than 24 hours. Sometimes it takes a bit, but an answer will be given.

 

Is really hard for us to do anything without a minimal demo that clearly illustrates the issue. A code snippet sometimes is not enough. The only things that caught my attention are these:

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.section-1',
    start: 'top top', 
    end: '120% top', 
    pin: true, 
    pinSpacing: false,            
    scrub: true,
    invalidateOnRefresh: true,
    refreshPriority: 1,
  }
}, 'a')

That string 'a' after the config object in the Timeline has no effect actually, there is no need for that.

 

let tl3 = gsap.timeline({
  scrollTrigger: {
    trigger: '.section-2',
    start: 'top top',
    end: "2500",
    pin: true,
    toggleActions: "unpin pin",
    markers: true,
    invalidateOnRefresh: true,
    refreshPriority: 2,
    scrub: 1,
    ease: "steps(12)",
  }
})

In this case ease has no effect in a ScrollTrigger configuration. Also those toggleActions only accepts a set of strings and the ones you're passing are not valid:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#toggleActions

 

Finally this:

window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    ScrollTrigger.refresh();
  }, 100); // Adjust the debounce delay as needed
});

You're clearing a timeout and the first time that resize event listener runs resizeTimeout is undefined, so that should return a warning or an error, but definitely that is not going to work, you should check if is truthy or not: resizeTimeout && clearTimeout(resizeTimeout);. Plus you're adding two resize event handlers, there is no real need for that.

 

Happy Tweening!