Gsap scroll trigger auto-scrolls when I navigate back.

[ogis]

I have a react application with scrolltrigger animation for horizontal scrolling. 

Every section is a link to a page. On first load, this works well, but when I open the page linked to each section and navigate back, the horizontal scroll automatically scrolls to the last one. Also, I have an extra white space at the bottom of each page. Anyone know why this might be happening?

Link here: Site

 

 

    tl.to(sections, {

      xPercent: -100 * (sections.length -1),

      ease: "none",

      scrollTrigger: {

          trigger: ".horizontal_wrapper",

          pin: true,

          start: 'top',

          snap: 1 / (sections.length - 1),      

          // markers: true,

          scrub: 1,

      end: () => "+=" + (document.querySelector(".horizontal_container").offsetWidth / 4),

      }

  })

[OSUblake]

Welcome to the forums @ogis

 

Are you killing your ScrollTriggers when you go to a new page? You may also want to look into clearing the scroll memory.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

[ogis]

Thank you. 

Sorry I am completely new to gSap and not sure how to kill the scrolltrigger. How would I kill it? 

[OSUblake]

Depends on what your doing, but typically like this with React if you to kill them all.

 

useLayoutEffect(() => {

  ...
  
  return () => {
    ScrollTrigger.getAll().forEach(trigger => trigger.kill());
  }  
}, []);