REACT GSAP MORPHSVG PLUGIN

[Andy1708]

Hello,

Can you tell me why when i click the button fast, it doesn't toggle back to start position.

Thanks

Yves

See the Pen rNLrbpL?editors=0111 by YVNKAD (@YVNKAD) on CodePen

[Rodrigo]

Hey Yves,

 

The main problem is that the useEffect() hook used to create the GSAP instance doesn't specify an array of dependencies, hence it runs everytime the component's state is updated, therefore the instance is created again and again, messing up the starting values that GSAP uses. Just use an empty array to run that code once when the component is first mounted and it should work as expected:

 

useEffect(() => {
  playpauseTL
    .to(triangleRef.current, { morphSVG: squareRef.current })
    .to(circleRef.current, { fill: '#00efeb' }, '-=0.3')
    .reverse()
}, [])

Also no need to register the plugin there, you can do it outside the scope of the component.

 

// This is for a more realistic setup not using the CDN links
import { gsap } from "gsap";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

gsap.registerPlugin(MorphSVGPlugin);

const App = () => {/* REACT CODE HERE */};

 

Finally you can check this guide to safely use the bonus stuff with NPM/Yarn:

 

https://greensock.com/docs/v3/Installation#NPM

 

Happy Tweening!!!