scrollTo Plugin with React JS (does not working)

[Laurie]

Hi ! 

 

I'm trying to include my scrollTo plugin animation in my React JS website. I found other topics, but I didn't found the answer that I'm looking for. Perhaps the solution is easy, but I didn't ! Nothing is happening when I'm trying to make the animation with scrollTo.

 

Here's a part of my actual code :

import React, { Component } from "react";

import { TweenMax } from "gsap";

import ScrollToPlugin from 'gsap/umd/ScrollToPlugin';

 

class Header extends Component {

  testScroll(){

    TweenMax.to('.nav-about', 1, { scrollTo: "#about" })

  }

 

  render() { 

    return ( 

      <div  className="nav-about" onClick={this.testScroll}> This is my big test </div>

    );

  }

}

 

export default Header;

 

I found how to import the ScrollToPlugin in my React App.  But the problem is : I'm wondering if this plugin is called or not. Because when I click, nothing is happening. 

Precisions : The section that has the id "#about" is written in another component. Perhaps is this the problem ?

 

Thanks a lot!

 

- Laurie

 

 

 

 

[ZachSaucier]

Hey Laurie,

 

You should be able to check whether or not the plugin is loading by using your developer tools. GSAP should leave a console message saying if it doesn't recognize scrollTo, provided the JS there is actually running. 

 

30 minutes ago, Laurie said:

The section that has the id "#about" is written in another component. Perhaps is this the problem ?

If that element is rendered in the page it shouldn't be an issue because Javascript runs after all elements are rendered.

 

How about you try to recreate the basic setup inside of something like StackBlitz? The below post might be able to help:

 

[Laurie]

Hi Zach, thanks for the answer !

 

I created a CodeSandBox, because I don't know how to create a React JS Demo in CodePen.

This is very basic, but I think it describes my actual problem. 

 

Here's the link :

https://codesandbox.io/embed/busy-darkness-zdlmx

 

Thank you again ! 

 

- Laurie

[Rodrigo]

Hi,

 

I was working on an answer when you posted yours. The live sample made it very clear, thanks for it.

 

Your main issue here is what part of the DOM is actually scrolling. Right now you have this on your code:

 

scroll() {
  TweenMax.to(".item", 1, { scrollTo: "#container" });
}

Now ".item" is the element where the click event is received and doesn't have any content that actually creates an overflow in it, is just a button. You have to point where the overflow actually exists, in this case the window object:

 

scroll() {
  TweenMax.to(window, 1, { scrollTo: "#container" });
}

That code actually works as expected.

 

Happy Tweening!!!

[Laurie]

Of course, this is very clear now ! Thanks a lot Rodrigo !  

 

[OSUblake]

Hi @Laurie

 

You're mixing import types, which may cause problems. I would import like this.

 

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

//without this line, ScrollToPlugin may get dropped by your bundler...
const plugins = [ScrollToPlugin];

 

https://greensock.com/docs/v2/NPMUsage

 

[Laurie]

Hi @OSUblake,

 

Thanks for the recommandation ! 

But, can you explain to me your last line ? 

I'm so confused about imports. Yesterday, I tried to import ScrollMagic (with its plugins setTween + debug indicators), but I never found the solution. 

 

Thanks again !  

[OSUblake]

1 minute ago, Laurie said:

But, can you explain to me your last line ? 

 

This line?

const plugins = [ScrollToPlugin];

 

When you do a production build and minify your files, it will remove any code that looks like it isn't being used. That process is commonly known as Tree shaking.

https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking

 

If you don't reference ScrollToPlugin anywhere in your code, your build tool will think it is dead code, and will remove the import. That line of code references ScrollToPlugin, so your build tool will not remove it. So the only thing that line of code does is it prevents your import from being removed during minification. 

 

 

19 minutes ago, Laurie said:

I'm so confused about imports. Yesterday, I tried to import ScrollMagic (with its plugins setTween + debug indicators), but I never found the solution. 

 

Well, ScrollMagic isn't a GSAP product so I can't offer much help on that. I made this post a while back, so I don't know if it will work with newer versions of webpack.

 

 

 

When all fails, just use CDNs instead of importing. 

https://cdnjs.com/libraries/ScrollMagic

 

 

[Laurie]

Thanks a lot !