Jump to content


Help morphing a path group based on React state

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I have a React component that is a replica of the Reddit character. It is composed of several grouped  paths and I would like to conditionally render a different face on the character based on the value of this.state.face in the component and tween the animation when the faces change.  In the codepen example, I have two alternative groups of paths: base_face and angry_face. I use a ternary operator to click and show each version, but I can't figure out how to tween a group of paths to animate from base_face to angry_face and vice versa.

Any help would be greatly appreciated.



See the Pen OvjYyV by pcdavis (@pcdavis) on CodePen

Link to comment
Share on other sites

Hi @pcdavis :)


I'm not a React user so I can't be of any help in that department, but I can answer your morph group question. The MorphSVG plugin works path to path so you can't just add a group to the tween, but it's fairly easy to accomplish with a loop. The trick is just making sure you artwork is in the right sequence to loop through and perform the morph. Here's a basic example:


See the Pen LNLpgB by PointC (@PointC) on CodePen

In my example, I've added a number to each path name. By doing that, I find it easier to see if I've made any mistakes, but it's not necessary. If your start and end paths are in the same sequence in their respective groups, it should be as easy as selecting the elements and creating morphs based on the index of the loop. In your case, you have a little extra work to do with the eyebrows. They aren't present on the happy face so you'd have to create a scale or drawSVG tween for them when you morph the mouth and eyes from happy to sad.


Hopefully that helps. Happy tweening.



  • Like 3
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.