eatmangos Posted December 26, 2019 Share Posted December 26, 2019 First time using GSAP after the upgrade. I seem to be doing something wrong, as a lot of my animation properties appear with a warning saying I am missing a register plugin? Everything works on local host but not when I push live. It simply just doesn't run. What am i doing wrong? Invalid property rotation set to 0deg Missing plugin? gsap.registerPlugin() Invalid property transformOrigin set to center Missing plugin? gsap.registerPlugin() gsap-core.js:83 Invalid property scale set to 0.5 Missing plugin? gsap.registerPlugin() Here is my gsap, btw it's not finished. The animation works on local host, but in testing in production I have to ask this question. import React, { useEffect, useState } from 'react' import { TweenMax } from 'gsap' export default function NavIcon() { const [click, setClick] = useState(false) useEffect(() => { TweenMax.set("#sq1", { transformOrigin: "center", }) TweenMax.set("#sq2", { transformOrigin: "center", }) TweenMax.to("#sq1", .5, { rotation: click ? '-135deg' : '0deg', }) TweenMax.to("#sq2", .3, { scale: .5, yoyo: true, repeat: 1, ease: "back.Out" }) }, [click]) return ( <div className='icon-hit-area' onClick={() => setClick(!click)}> <svg id='sq1' className='nav-icon' width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="sq2" d="M0 0H8V8H0V0Z" fill="#E63652" /> <path id="sq2" d="M13 0H21V8H13V0Z" fill="#E63652" /> <path id="sq2" d="M0 13H8V21H0V13Z" fill="#E63652" /> <path id="sq2" d="M13 13H21V21H13V13Z" fill="#E63652" /> </svg> </div> ) } Link to comment Share on other sites More sharing options...
GreenSock Posted December 26, 2019 Share Posted December 26, 2019 Hey @eatmangos - what version of GSAP are you using? Please make sure you've got the latest (3.0.4 right now). It sounds like your build system is dumping CSSPlugin as part of tree shaking or something. I'm only guessing since I don't have a demo to look at. Of course I'd recommend using the newer syntax, like gsap.to(...) instead of TweenMax.to(...) but that's not the cause of the errors or anything. You could also try importing CSSPlugin and registering it like gsap.registerPlugin( CSSPlugin ) just to force your build system not to dump it, but that really shouldn't be necessary at all especially in the latest version. 2 Link to comment Share on other sites More sharing options...
Chris7777 Posted January 19, 2020 Share Posted January 19, 2020 Hi @GreenSock - I'm not the OP but this helped me track down an identical issue (production only issue with React). I'm going to jot down some notes in case others hit something similar. My setup: React + TypeScript + Webpack4 using ts-loader with default settings. gsap 3.0.5 Like most things Webpack its really difficult knowing what is going on under the hood, even after reading the documentation (https://webpack.js.org/guides/tree-shaking/) I can't confidently say if Webpack4 does tree shaking or not. By following the advice by Jack in my app's entry file, I was able to force CSSPlugin to remain available: import { gsap } from 'gsap' import { CSSPlugin } from 'gsap/CSSPlugin' // Force CSSPlugin to not get dropped during build gsap.registerPlugin(CSSPlugin) This was done just once (in my entry file) and then all child modules/components were able to successfully use it without issue. 2 Link to comment Share on other sites More sharing options...
By Odin's Beard Posted March 12, 2020 Share Posted March 12, 2020 Thanks , I just first went thru a day of production build debugging only to have gasp throw error for page transitions about missing plugin when I finally got the other day long bug fixed and then in seconds found this redeployed and everything is working. 💕 1 Link to comment Share on other sites More sharing options...
Tony TAB Posted April 29, 2020 Share Posted April 29, 2020 Same problem, similar solution here. In my case I was using Gatsby and it seems that the tree shake gets rid of CSSPlugin. Solution was as suggested in docs import React, { Component } from 'react'; import { TimelineLite, CSSPlugin } from 'gsap/all'; import tab from '../../assets/images/arrow.png'; import { Col } from 'react-bootstrap' //need this to avoid tree shake of CSSPlugin const plugins = [ CSSPlugin ]; Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 29, 2020 Share Posted April 29, 2020 Hey @Tony TAB and welcome to the GreenSock forums. Thanks for contributing. Just a side note: We recommend that you use gsap.timeline() instead of TimelineLite/Max. We find the GSAP 3 API to be sleeker and you don't have to worry about importing anything extra. Link to comment Share on other sites More sharing options...
Tony TAB Posted April 30, 2020 Share Posted April 30, 2020 OK changed to that. Not read your 3.0 migration notes yet but I am planning on doing that today Link to comment Share on other sites More sharing options...
billyZduke Posted March 28, 2021 Share Posted March 28, 2021 (edited) FYI, I am currently experiencing this exact issue: the need to import and register CSSPlugin using React/Gatsby and GSAP 3.6.1 (w/ Shockingly Green bonuses). I've been trying on and off for some time now to rewrite the Makisu jQuery plugin as a React component, and today have been getting tons of errors that "rotateX" was not a valid property, until I explicitly imported CSSPlugin and registered it. No idea why, but the issue only occurs for me in this component, I have plenty of other elements being tweened via gsap using rotateX that are still working fine in other contexts... Weird. EDIT: Having gotten it closest to working yet, I made a codesandbox here: objective-hamilton-c8hpc - CodeSandbox. The question now is why I can't get the section unrolling animations to overlap, either by using delay or by inserting at specific times... Edited March 28, 2021 by billyZduke codesandbox added 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