Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Slide with ScrollTo doesnt work

Recommended Posts



I'm doing something in React.js and I don't know why the scrollTo doesn't work. Basically what I'm trying to do is something similar to what Mikel did

See the Pen XWbBGPz?editors=0010 by e1668058 (@e1668058) on CodePen

but without the buttons. I'm just trying to figure out how to do it just with the mousescroll. 


just a little extra, I've also thought of adding an onStart and onComplete for the TweenMax so that when it starts I lock the mousewheel with


window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} );

 and when it completes I unlock the mouse with passive: true.


Thank you.

Heres my code pen.

See the Pen XWbxXGx by e1668058 (@e1668058) on CodePen

Link to post
Share on other sites

Thanks for the help @ZachSaucier.  

I've made a codesanbox demo so that I can simulate the code I wrote with React js



There's an error in my sideMenu.js in the components folder that says :

gsap is not defined

with 4 console messages saying

DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map


Where do I define gsap?

It doesnt do anything if I import it like this


import "gsap";

 or this :


import gsap from "gsap";


and it doesnt work if I replace 





Link to post
Share on other sites

We highly recommend using our install helper until you get comfortable with the format of importing GSAP tools. Using it you can see that the imports you need are:

import { gsap } from "gsap";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";



However, React currently doesn't support passive event listeners so you should use a useEffect or something to work around the issue: https://github.com/facebook/react/issues/14856#issuecomment-586781399

Link to post
Share on other sites

Thank you for your help. I'll try to see what I can use to fix the problem of React.  

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.