blizve0 Posted January 23, 2022 Share Posted January 23, 2022 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 Link to comment Share on other sites More sharing options...
Cassie Posted January 24, 2022 Share Posted January 24, 2022 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! 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 24, 2022 Share Posted January 24, 2022 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. 1 Link to comment Share on other sites More sharing options...
blizve0 Posted January 25, 2022 Author Share Posted January 25, 2022 Oh I Guess I need to Refresh on Page Switches for scrollTrigger animations to Re-initialize Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now