Jump to content


GSAP 3 registerPlugin() problems with React

Recommended Posts

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" />


Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...

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

This was done just once (in my entry file) and then all child modules/components were able to successfully use it without issue.



  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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. 💕

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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 { TimelineLiteCSSPlugin } from 'gsap/all';
import tab from '../../assets/images/arrow.png';
import { 
  } from 'react-bootstrap'
//need this to avoid tree shake of CSSPlugin
const plugins = [ CSSPlugin ];
Link to comment
Share on other sites

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

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

  • 10 months later...

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 by billyZduke
codesandbox added
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.