Jump to content
GreenSock

codie-wan

MorphSVG, React and Typescript

Recommended Posts

Hi All, 

 

I'm working on a Pokemon Ml project and I wanted a unique loading screen... so here I am, in the home of unique fe projects.

 

To set the stage I've had some Pokemon SVGs drawn up and I wanted to use morphSVG to morph between the loading Pokemon. The Issue is, I have about

ten of them that are sent in a random batch of three from the Be to the Fe, so it's always a new loader animation. (shown below). 

image.thumb.png.bb750b0f10d34cc750151f446ff66e2e.png

This is where I'm having some issues, as I'm not used to using useRef or Ts with react (its kind of a learning project for me ). Whilst also being relatively new to GSAP. Heres my code, please if you have any suggestions throw them out there... its greatly appreciated, as I'm unsure about best practices with GSAP 

 

 

image.thumb.png.16656ee5b9f3b6d05e3e0d800988ceef.png

 

Also here is a link to my repo if thats easier 

 

Thank you in advance its really appreciated, 

Codie-Wan 

 

image.png

  • Like 1
Link to comment
Share on other sites

Hey there!

 

I'm not quite certain what the question is here I'm afraid.

The first step I would suggest is making a codepen without react, and just getting the animation working. We can help with that if you need assistance!

Then after you're certain everything's working like you planned - start integrating it into your React setup. This article is full of info that will help there.
 


I'm afraid we don't have capacity to look through repo's to troubleshoot, but if you provide a minimal demo and have a GSAP specific question we'll take another look.

Hope this helps, sorry I can't dig in further!

  • Like 1
Link to comment
Share on other sites

49 minutes ago, Cassie said:


The first step I would suggest is making a codepen without react, and just getting the animation working. We can help with that if you need assistance!

Hi Caddie, I've made a CodePen of the animation I'm trying to get to work found here

 

Thank you for the response, this has been bugging me for hours.

Link to comment
Share on other sites

Hey again

I really suggest getting it working without React first. We can certainly help you with the GSAP side of things. Just from a glance you're loading in these SVG's as image tags which won't work with animation.

Quote

The first step I would suggest is making a codepen without react, and just getting the animation working. We can help with that if you need assistance!


If you need React specific help there are some great web animation and web development communities out there that may be more what your looking for, I'd recommend this discord

  • Like 1
Link to comment
Share on other sites

27 minutes ago, Cassie said:

Just from a glance you're loading in these SVG's as image tags which won't work with animation.

what elements can I use for the animation exactly? 

 

can I use <object> tags? as the SVGs are files that are made available from a backend and cant be hard coded into SVG tags.

Link to comment
Share on other sites

No, I'm afraid SVG needs to be inline for animation.

 

It's going to be more complex than just "morph this SVG into this SVG" too. MorphSVG morphs SVG paths into other SVG paths - your SVG's are comprised of multiple paths, so you'll need to decide which path is going to morph into which. And if there aren't an even number you'll need to work out logically what to do with them.

I would set this up with one inline SVG with all your pokemon paths in.

Visually I'm not certain you'll get the result you're imagining, it's going to take a bit of tinkering, and likely some restructuring of your SVG paths -which is why I'm nudging you towards testing that out first before getting into react/backend structural stuff.

  • Like 1
Link to comment
Share on other sites

Ah, I'm starting to see the problem...

 

So, hypothetically if I was to brute force my way through this, I would have to join all the paths of the black outlines so they're one path, then morph all the outlines. Whilst, simultaneously run another morph of all the highlight outlines (yellow, blue and red), so that it looks like the SVG's (which are now two separate paths) are morphing.

 

Would that make sense? 

 

Quick side question, can I change the SVG colour in SVG morph? OR is this something that I will have to do in a separate function?

Link to comment
Share on other sites

They wouldn't necessarily need to be joined up. You could keep them separate but each target path would need another destination path to morph into. And yep, you can change the fill color in the tween.

 

I suggest just popping open a codepen and having a very minimal mess about with a couple of paths and a tween just to see how it works.

Here's a starting point.

See the Pen JjLvJmz?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hey!, I did a simple animation just to show the concept about to use morphSVG.

 

In this example all paths are morphing from the same shape (circle), if you need transitions between two SVG (I refer to your files), you need to make sure to have the same quantity of paths in each SVG to have a smooth transition between them.

I hope this helps you!

 

https://codesandbox.io/s/morph-svg-gsap-charmander-2wpntv


(I forked your codesandbox, and worked there)

  • Like 2
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.
×