Jump to content
GreenSock

medmedmed75

[ScrollToPlugin] React - Failed to execute 'scrollto' on 'window'

Recommended Posts

Hello everyone,

 

I'm currently working on a React project and I need to use ScrollToPlugin. 

 

Here is how I import the plugin 

 

import gsap from 'gsap'
import ScrollToPlugin from 'gsap/ScrollToPlugin'

And then, to prevent some troubles in production, added 

const plugins = [ScrollToPlugin]

Then I have a scroll ref 

  const scrollRef = useRef(null)

And finally this is how I used the scrollto function 

 const scrollTest = el => {
    gsap.to(window, {duration: 1, scrollTo: el });
  }

<button className={s.btn__scroll} onClick={() => [setScrolled(true), scrollTest(scrollRef)]}>Go Down</button>

 

 

After many researches, I thought it was due to an import issue. So I've tried to insert cdn script directly in the public html... doesn't work. 

Any ideas? :)

 

SOLUTION

As @elegantseagulls said below, you just have to register your ScrollToPlugin as follow : 

gsap.registerPlugin(ScrollToPlugin)

 

Many thanks 

 

 

 

  • Like 2
Link to comment
Share on other sites

Hi @medmedmed75

 

Hard to say without seeing your code in action... Can you setup a codesandbox with your react setup?

 

With what I'm able to see:

First thing, you'll want to be sure to register your ScrollToPlugin before you use it.

gsap.registerPlugin(ScrollToPlugin);

 

Also, are you seeing any errors in the console? Have you tried logging your ref (el) inside scrollTest to make sure that it is representing an element (or using an '#id' to test)? Have you tried just running the scrollTo tween without the setScrolled() or anything else to try and isolate?

 

Hope this helps narrow it down. I run the scrollToPlugin on a lot of React projects, so I can confirm that it works.
 

  • Like 5
Link to comment
Share on other sites

Hi @elegantseagulls

I tried everything... but not to register my ScrollToPlugin and it works very well. :)

 

Many thanks, I edit my post with the solution! 

 

 

  • Like 1
Link to comment
Share on other sites

5 hours ago, medmedmed75 said:

And then, to prevent some troubles in production, added 


const plugins = [ScrollToPlugin]

 

And you don't need to do that anymore. That's one issue using .registerPlugin() helps fix.

  • Like 3
Link to comment
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.
×