eatmangos

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 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?

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

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

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

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?

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

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

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?