TweenLite inside of react project not working after build

[Roshambo]

I am having an issue on my production build  (npm run build) where GSAP TweenLite plugin is not working and throwing an error Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.My local development server seems to work fine.

 

Local: console.log(com.greensock.plugins.ScrollToPlugin.version); -> //1.9.2

Production console.log(com.greensock.plugins.ScrollToPlugin.version); -> //Uncaught TypeError: Cannot read property 'version' of undefined at <anonymous>:1:50

devDependencies "gsap": "^2.1.3",

 

Component:

import { TweenLite } from "gsap/all";
..

const handleOnClick = id => {
    let headerHeight = 90; // height of the sticky nav
    let paddingTop = 20; // add some padding.
    TweenLite.to(window, 0.5, { scrollTo: { y: `#${id}`, offsetY: headerHeight + paddingTop } });
};

//Map function
...
<li key={item.id} onClick={() => handleOnClick(item.id)}>
    <span className="text">{item.text}</span>
    ...
</li>
...

[ZachSaucier]

Hey Roshambo and welcome to the GreenSock forums!

 

These sorts of errors usually mean that the plugin was removed by more aggressive tree-shaking in production. 

 

We recommend using GSAP 3, not only because it has a sleeker API, a smaller file size, and has a bunch of new features, but also because it enforces that you register plugins to prevent this tree shaking from occurring. Why not upgrade?

 

This is what it should look like in GSAP 3:

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

gsap.registerPlugin(ScrollToPlugin);

// ... 

const handleOnClick = id => {
    let headerHeight = 90; // height of the sticky nav
    let paddingTop = 20; // add some padding.
    gsap.to(window, { scrollTo: { y: `#${id}`, offsetY: headerHeight + paddingTop } });
};

For more information about installation, see the GSAP installation page.

[OSUblake]

For v2.

import { TweenLite, ScrollToPlugin } from "gsap/all";
const plugins = [ScrollToPlugin];

// if you need to animate CSS properties
import { TweenLite, CSSPlugin, ScrollToPlugin } from "gsap/all";
const plugins = [CSSPlugin, ScrollToPlugin];

 

But I would recommend upgrading to v3.

 

 

[Roshambo]

On 4/24/2020 at 11:27 PM, OSUblake said:

For v2.

import { TweenLite, ScrollToPlugin } from "gsap/all";
const plugins = [ScrollToPlugin];

// if you need to animate CSS properties
import { TweenLite, CSSPlugin, ScrollToPlugin } from "gsap/all";
const plugins = [CSSPlugin, ScrollToPlugin];

 

But I would recommend upgrading to v3.

 

 

 

Thanks @OSUblake this solution works!