Content Dissappears After Pages Change from Router

[blizve0]

Hi, I am using GSAP ScrollTrigger along with smooth-scrollbar library and this is the Plugin I'm using.

 

ERROR  - When I switch Pages usng React Router (Or Any Router) The Respective Page Content Either Dissappers or Freezes and All GSAP Animations Freezes

 

This is The ScrollTrigger Plugin

 

import Scrollbar from "smooth-scrollbar";

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

 

gsap.registerPlugin(ScrollTrigger);

 

class ScrollTriggerPlugin extends Scrollbar.ScrollbarPlugin {

constructor(scrollbar, options) {

super(scrollbar, options);

this.setProxy();

}

 

setProxy() {

const scrollbar = this.scrollbar;

 

ScrollTrigger.scrollerProxy(document.body, {

scrollTop(value) {

if (arguments.length) {

scrollbar.scrollTop = value; // setter

}

return scrollbar.scrollTop; // getter

},

getBoundingClientRect() {

return {

top: 0,

left: 0,

width: window.innerWidth,

height: window.innerHeight,

};

},

pinType: "transform",

});

 

scrollbar.addListener(ScrollTrigger.update);

}

}

 

ScrollTriggerPlugin.pluginName = "ScrollTrigger";

 

export default ScrollTriggerPlugin;

 

This is How I Use It on All Pages as a Component

 

import { useEffect } from 'react'

import Scrollbar from 'smooth-scrollbar'

import ScrollTriggerPlugin from '@/math/scrollTrigger'

 

Scrollbar.use(ScrollTriggerPlugin)

 

const SmoothScroll = () => {

 

useEffect(() => {

const view = document.getElementById('view-main') //` Declare View Reference

const settings = {

damping: 0.075,

renderByPixels: false,

delegateTo: document,

}

 

const smoothscroll = Scrollbar.init(view, settings)

 

return () => {

smoothscroll.destroy()

}

}, [])

}

 

Note: When i use the view document.body directly These Problems Don't Occur. I have already checked with the smooth-scrollbar developer and tested out that the ScrollTrigger Plugin is Causing this Trouble. I have tried re-initialization but id doesn't help

 

[Cassie]

Hi there @blizve0,

Please keep in mind that we can't offer support for 3rd party libraries, but we're happy to answer any GSAP-specific questions.

If you're switching 'pages' in a SPA you'll likely ned to call scrollTrigger.update()

We'll be able to assist more if you can provide us with a minimal demo.

 

Thanks!

[GreenSock]

5 hours ago, Cassie said:

If you're switching 'pages' in a SPA you'll likely ned to call scrollTrigger.update()

 

Minor correction(?) - I think Cassie meant ScrollTrigger.refresh()

 

To be clear, ScrollTrigger.refresh() is the more expensive function that re-calculates all the start/end positions so that then when you scroll, it can very quickly evaluate things. ScrollTrigger.update() is much cheaper and basically just tells each ScrollTrigger to update its progress. 

[blizve0]

Oh I Guess I need to Refresh on Page Switches for scrollTrigger animations to Re-initialize