Browser back button not scrolling to the element from which I navigated to the section due to scroll trigger.

[Zain12 4 Likes (Newbie)]

Hi community. I know minimal demo is a core requirement for asking a question but I hope this would not require. In case, if it does, I will post the demo too. In my react app, when I click on the link and navigate to other route and after that if I click on the browser back button it does not scroll to the section where the link was placed (which is the default browser behavior) but as soon as I comment out my scroll trigger, it starts working fine. Here is my gsap settings

 

 useLayoutEffect(() => {
    const mediaQuery = window.matchMedia('(min-width: 768px)');
    // if (mediaQuery.matches) {

      console.log('i am running')
      const sliderTopDiv = document.getElementsByClassName('sliderTopDiv')
      const slides = gsap.utils.toArray(".about");

      const tl = gsap
        .timeline({
          scrollTrigger: {
            trigger: sliderTopDiv,
            start: "50% 50%",
            end: "+=" + 100 * (slides.length - 1) + "5",
            pin: sliderTopDiv,
            scrub: 0.1,
            markers: false,
          
          },
        })
        .to(slides, {
          xPercent: -(100 * (slides.length - 1)),
          ease: "none",
        });

      const images = gsap.utils.toArray(".aboutImg");
      images.forEach((image, index) => {
        gsap.from(image, {
          opacity: 0.2,
          scale: 0.5,
          transformOrigin: "center center",
          ease: "none",
          scrollTrigger: {
            trigger: slides[index],
            containerAnimation: tl,
            start: "left 75%",
            end: "left 25%",
            //markers: { startColor: "fuchsia", endColor: "fuchsia" },
            scrub: true,
          }
        });
      });

      
      

      tl.progress(1).progress(0)
      
      
      ;
      

     
    
    
  }, []);

My slider animation is working perfectly fine, I have excluded the imports from the post

[Rodrigo 5,407 Likes (Superhero)]

Hi,

 

When it comes to using GSAP in a React environment GSAP Context is your best friend. It prevents the double effect call in strict mode introduced in React 18. That could be a reason for this.

 

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Also I'd recommend you to use GSAP MatchMedia instead of the native match media object. The benefits are that it works great for creating GSAP animations in different breakpoints and also is a wrapper for GSAP Context, so you get all those benefits in one go:

 

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

The effect hook would look a bit like this:

useLayoutEffect(() => {
  const mm = gsap.matchMedia();
  mm.add("(min-width: 768px)", () => {
    // All your GSAP code here
  });
  return () => mm.revert(); // <- Super Easy Cleanup!
}, []);

Finally based on the little snippet you're sharing the main suspects I have for your issues are:

1. You're not cleaning up your GSAP instances when the components are unmounted
2. You are using from instances in your setup. This in strict mode is quite problematic as mentioned in this thread:
3. You could have conflicting ScrollTrigger instances, but without a minimal demo I couldn't tell you that.

Give MatchMedia a try and if you keep having issues, please include a minimal demo. You can fork one of our React starter templates:

https://stackblitz.com/edit/react-cxv92j

 

Hopefully this helps.

Happy Tweening!

[Zain12 4 Likes (Newbie)]

Thanks for the response but unfortunately this is not working. I just observed that if I remove the pin property from the scrollTrigger object the animation stops but the browser back button works as it should i.e it scrolls me down perfectly fine.

[Rodrigo 5,407 Likes (Superhero)]

Hi,

 

That could be more related to other stuff, perhaps some transform applied to a parent element of the one being pinned, a flex display property, etc.

 

Without a minimal demo there is nothing else we can do. Please use the Stackblitz link I provided in order to create a small example that illustrates the issue you're having, please do not include your entire project.

 

Happy Tweening!