Roshambo Posted April 24, 2020 Share Posted April 24, 2020 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> ... Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 24, 2020 Share Posted April 24, 2020 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. Link to comment Share on other sites More sharing options...
OSUblake Posted April 24, 2020 Share Posted April 24, 2020 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. 2 Link to comment Share on other sites More sharing options...
Roshambo Posted April 26, 2020 Author Share Posted April 26, 2020 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! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now