Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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 

 

 

 

Share this post


Link to post
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 4

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×