[GSAP 3 registerPlugin() problems with React]

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>
    )
}

 

[How do run animations that interact with the mouse]

How do I use the mouse position to change different animation values such as in this website: https://www.wecargo.be/ The background is always doing something where the mouse is.

Also they have a cool page peel animation that happens in the bottom. How do you do that sort of stuff with reach, javascript, and greensock?

[Is there a clean up function that I should be running within my useEffect Tweens]

My goal is to fix buggy performance when iterating a large array using React refs and Gsap tweens. Is it possible to remove DOM nodes when they leave the view port as a user scrolls, maybe in combination with React Intersection Observer?

For example..

useEffect(() => {
    TweenMax.to(hoverRef.current, .2, { opacity: hovered ? 1 : 0 })
    TweenMax.to(imageRef.current, .5, { scale: hovered ? .5 : 1, opacity: hovered ? .9 : 1, ease: Back.easeOut, y: hovered ? '-12px' : '0px', })
    TweenMax.to(imageRef.current, .2, { delay: .1, y: hovered ? '-12px' : '0px', })
    !props.fromExplore ?
        (TweenMax.to(utencilRef1.current, .5, { x: hovered ? 0 : 20, rotation: hovered ? 0 : 20, ease: Back.easeOut }) &&
            TweenMax.to(utencilRef2.current, .5, { x: hovered ? 0 : -20, rotation: hovered ? 0 : -20, ease: Back.easeOut }))
        :
        TweenMax.to("#nothing-999", 1, { opacity: 0 })
}, [hovered])

VS

useEffect(() => {
    ...
    return function cleanup(){};
}, [hovered])




const [trackingRef, inView, entry] = useInView({
    threshold: 0,
})

[How to set starting position on MorphSVG.pathDataToBezier aligned item]

Yup this makes sense, thank you! Look forward to the update

[How to set starting position on MorphSVG.pathDataToBezier aligned item]

Yes I have gone through that video and page, i cant see anything about setting to position on the path? It always starts at the beginning.. Maybe I could rotate the svg path itself..

[How to set starting position on MorphSVG.pathDataToBezier aligned item]

Its easy to set up an animation to trace a path using the plugin, but how can i change the starting position and direction it rotates?.. Lets say my path i am tracing is a circle, how could i align an item to start at the top of the circle, vs start at the bottom of the circle. Then spin CW, vs CCW?

[How to add findShadeIndex to react app]

<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js'></script> // in index.html

 

// in component

const findShapeIndex = window.findShapeIndex 

findShapeIndex("#shape1", "#shape2")

 

[How to add findShadeIndex to react app]

thanks, sorry i am new to all of this... how do i import from that?

[How to add findShadeIndex to react app]

I am a club green sock member so i use the bonus NPM files for all my GSAP imports using es6 methods.. Where do i get findShapeIndex?