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

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.

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

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.

 

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

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);

});

[React JS - gsap scrollTrigger doesn't working on scroll down but working fine on scrollup]

@Rodrigo

Thank you so much for helping and correcting me  

[React JS - gsap scrollTrigger doesn't working on scroll down but working fine on scrollup]

I am trying to implement timeline animation where each element will be coming up (from right to left) one by one on scroll down and reverse on scroll up

At my end its not working on scroll down but working fine with scroll up

I have tried the following.

 

import { useEffect, useRef } from 'react';
import { gsap, Power1 } from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';

function WeHeard(props) {
    
    gsap.registerPlugin(ScrollTrigger);
    useEffect(() => {
        const animation = gsap.timeline({
            scrollTrigger: {
                trigger: ".hearedListing",
                scrub: true,
                start: "top 10%",
                end: "bottom top",
                markers:false
            }
        }).from('.hearedListing li', {
            x:300,
            autoAlpha:0,
            duration:4,
            stagger:2,
            ease: Power1.out
        });
    }, []);

    return <>
    <section className="heared-listing hearedListing" >
        <div className="container">
            <div className="row">
                <div className="col-md-12 text-center">
                <h2 className="animate-heading">We heard</h2>
                    <ul className="list-unstyled primary-text-color h4 mt-5">
                        <li >Here is my line one</li>
                        <li >Here is my line two</li>
                        <li >Here is my line three</li>
                        <li >Here is my line four</li>
                        <li >Here is my line five</li>
                        <li >Here is my line six</li>
                        <li >Here is my line seven</li>
                        <li >Here is my line eight</li>
                        <li >Here is my line Ten</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    </>
}
export default WeHeard;

I am created a codesandbox here