Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Andy1708

REACT GSAP MORPHSVG PLUGIN

Recommended Posts

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

  • Like 3
  • Thanks 1
Link to post
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.

×