Jump to content
GreenSock

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

Slide with ScrollTo doesnt work

Recommended Posts

Hello, 

 

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

Hey DownfallOfADog. The main issue is that you're attempting to use the ScrollToPlugin but failing to load it :) 

 

Here's how I'd set it up:

See the Pen JjdmNaY?editors=0010 by GreenSock (@GreenSock) 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

https://codesandbox.io/s/dazzling-vaughan-972oc

 

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 

gsap.to

with 

 TweenMax.to

 

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";

gsap.registerPlugin(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.

×