[Help morphing a path group based on React state]

Hi,

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.

Thanks,

Paul

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

[Importing TweenMax into React component]

I have a GSAP animation working in a React component on codepen (thank you @rodrigo). Now I am trying to use it in my React project, but I get an error message saying, "'../../index' does not contain an export named 'TweenMax'."  

I'm guessing my strategy of placing the cdn links for TweenMax and MorphSVGPlugin in the public/index.html was not the correct way to add GSAP to the project.

Do I have to download the source code and place it in the project or can I still use the CDN - and if so, where do I place the link?

Thanks for any suggestions.

Paul 

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

[Simple React/GSAP animation]

Any chance you could take a look at my codepen? I can get my GSAP svg to work without React. But, as soon as I try to place it inside a React component, it doesn't show up. I am not quite sure how to create and render React components inside of codepen, so I followed the example you showed above. Below I am pasting links to the codepen where the GSAP svg works (non-React) and the broken one (React). I would be grateful for any help.  If you know of any npm packages that help GSAP and svg in-general work well with React, please let me know. Thanks again. Paul.

 

Broken React version: 

See the Pen wmdpzK?editors=1010 by pcdavis (@pcdavis) on CodePen

 

 

And here is the version that works without React:

See the Pen BrRJaB?editors=1000 by pcdavis (@pcdavis) on CodePen

 

[Why isn't my svg's fill color changing?]

Thank you!

[Why isn't my svg's fill color changing?]

Hi,

I'm new to Greensock, so please excuse me if this is a dumb question. I used Illustrator to create two alternatives of the reddit logo: one with fill color gray, the other with fill color red. The morphSVG works correctly on the shape change, but the color is not changing from gray to red. Any help would be greatly appreciated.

 

NOTE: In the attached codepen, you have to click on the word "Devil" to start the animation.

 

Thanks,

Paul

See the Pen QmdMEq?editors=1010 by pcdavis (@pcdavis) on CodePen

[Having trouble animating a jpg]

You guys are awesome. Thanks so much for the help!

[Having trouble animating a jpg]

I am learning GSAP by following your YouTube tutorial "Getting Started Quickly with GSAP".  I am trying to animate a jpg across the screen but am getting no joy. Could someoen take a look at my codepen and tell me what I'm doing wrong?  Sorry for the newbie question.

 

Paul

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