gsap.to working smooth on firefox but not working on chrome

[dev-ram]

I am trying to scroll from one section to another section using gsap.to. its working fine on firefox but not working on chrome.
In chrome, it take some delay to start scrolling and scrolling immediate to the next section.

 

 

here is codesandbox example (its working here but not working in my at my end.)
codesandbox sandbox
checkout here how it works at my https://www.loom.com/share/ca8a303e5711423d8da526b7b2901e3d

 

document.addEventListener("DOMContentLoaded", function(event) {

 

 window.addEventListener("load", function() {

 var nextSectionButton = document.getElementById('days-rip-btn');

 nextSectionButton.addEventListener('click', scrollToSection);

   function scrollToSection() {

    gsap.to(window, {duration: 3, scrollTo:"#listening"});

   }

 }, false);

});

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[dev-ram]

38 minutes ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

i have provided codeSanbox demo. its works. but when it comes to my system it not working as expected. I am using the same script.
i have also attached link of my system's screen recording.

 

[Rodrigo]

Hi,

 

Indeed is weird that is happening like that in your local environment. Please be sure to have the latest version of GSAP installed same with React (I noticed that you're using version 17 of React). Honestly I couldn't tell you what the issue could be, you could try using network throttling in your local setup and see if that makes a difference and also create a production build of your app and run it on your local machine or deploy it to see if you keep having the same problem.

 

Also GSAP Context is not the best place to create references to DOM elements and add event listeners to them. You can add an event to GSAP Context directly that creates and handles a GSAP instance and then call that method elsewhere in your code using the context instance:

useLayoutEffect(() => {
  let ctx = gsap.context((self) => {
    self.add("scrollToNextSection", () => {
      gsap.to(window, { duration: 5, scrollTo: "#section5" });
    });
  }, root); // <- scopes all selector text to the root element

  var all_next_section_buttons = document.getElementById("section1");
  all_next_section_buttons.addEventListener("click", (e) =>
    ctx.scrollToNextSection(e)
  );

  return () => ctx.revert();
}, []);

See? much simpler and cleaner, now GSAP Context does only one thing, handling GSAP stuff (https://en.wikipedia.org/wiki/Single-responsibility_principle)

I forked your sandbox so you can see it live:

https://codesandbox.io/s/sad-bogdan-orlixq?file=/src/App.js

 

Let us know if you have more questions.

 

Happy Tweening!

[dev-ram]

On 10/28/2022 at 9:33 PM, Rodrigo said:

Hi,

 

Indeed is weird that is happening like that in your local environment. Please be sure to have the latest version of GSAP installed same with React (I noticed that you're using version 17 of React). Honestly I couldn't tell you what the issue could be, you could try using network throttling in your local setup and see if that makes a difference and also create a production build of your app and run it on your local machine or deploy it to see if you keep having the same problem.

 

Also GSAP Context is not the best place to create references to DOM elements and add event listeners to them. You can add an event to GSAP Context directly that creates and handles a GSAP instance and then call that method elsewhere in your code using the context instance:

useLayoutEffect(() => {
  let ctx = gsap.context((self) => {
    self.add("scrollToNextSection", () => {
      gsap.to(window, { duration: 5, scrollTo: "#section5" });
    });
  }, root); // <- scopes all selector text to the root element

  var all_next_section_buttons = document.getElementById("section1");
  all_next_section_buttons.addEventListener("click", (e) =>
    ctx.scrollToNextSection(e)
  );

  return () => ctx.revert();
}, []);

 

See? much simpler and cleaner, now GSAP Context does only one thing, handling GSAP stuff (https://en.wikipedia.org/wiki/Single-responsibility_principle)

I forked your sandbox so you can see it live:

https://codesandbox.io/s/sad-bogdan-orlixq?file=/src/App.js

 

Let us know if you have more questions.

 

Happy Tweening!

Thanks for the suggestion and response.
I tried debugging  the issue and found some third party libraries and making such issues. I have stopped using that library and its working fine now.

Thanks.