Jump to content
Search Community

My (not quite) First MorphSVG

Creek test
Moderator Tag

Recommended Posts

My guess is that this doesn't work because the groups aren't simple paths? But I have absolutely no idea?

 

I promise that this is a situation where I can't "try harder" - because I thought I'd properly layered the SVG, and hiding the elements did provide the first expression - and I then supposed and hoped, based on the original pen, that the code would just make the hidden layers visible as it did whatever it might do with morphSVG? But that didn't happen, and there are now literally UNLIMITED numbers of things I might have done wrong?

 

Basically, beyond creating the proper groupings in Illustrator - I don't really have very much understanding of SVG or Javascript or MorphSVG. I just have various eye expressions and I've dropped them in to the fork of MorphSVG - sequence, just to see what might possibly happen? And then hopefully continue learning more? Instead - nothing happens at all?

 

I have completed quite a few lessons on creativecodingclub, even completed the suggested JavaScript intro course on SkillShare.

 

I absolutely don't wish to be pestering anyone whatsoever - but I very honestly don't know how to go about learning what it is I need to know to be able to do this? So THANK YOU SO VERY MUCH for ANY possible guidance!

 

Oh, and the "morphing" between the various "expressions" is just completely random, not correctly ordered between keyframes - again, just to hopefully see what might happen. Just playing around at this point.

 

Also, if anyone's willing to help? Please advise if, as I post Codepens here - if it's best to continue forking, so that I'm not editing the CodePen on which I requested help? Or is there some type of version control? Just thinking - if I didn't do that - any advice wouldn't be helpful to anyone checking it out later - if I just edited the original? Oh... and I might still screw up - but I'll try to follow any guidelines?

 

See the Pen QWgyqqg by tibbeecode (@tibbeecode) on CodePen

Link to comment
Share on other sites

15 minutes ago, Creek said:

because the groups aren't simple paths?

Bingo.

morphSVG works by animating the path data inside the d="" attribute
 

<path class="start" d="M348.34,170.27C312.42..."/>
<path class="end" d="M586,384.23C323..."/>


So you'd need to morph between two different paths. That being said - maybe you're not after morphing? If you just want to change the the expressions you can do that with opacity.

 

  • Like 5
Link to comment
Share on other sites

Yep - groups won't work. It needs to be path → path. That being said, you can loop through and create a tween for each one. Here's an old demo of mine that shows how to loop and morph. I've added IDs in this case for clarity, but an ID on each one is not necessary.

 

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

 

For that to work properly you'll need the same number of paths in each group. In looking at your demo it appears that the various groups are not consistent so it may take some extra work. Maybe some of the elements in each group don't actually change? Just guessing on that, but if something isn't changing, you can move it out of the morph group. 

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

See the Pen OJgMOEZ by GreenSock (@GreenSock) on CodePen



And yes, forking is the best way to make changes to your demo - thanks for considering future readers of the thread!

Good job with your layer organising too. A couple of tips.

When you save you SVG in illustrator (file > export > export as / export for screens) there's an option to use 'presentation attributes' for styling. This makes the SVG a lot more readable, saves on conflicting classes and makes it easier to override styles later on.

This is a great little online optimiser too.

Screenshot 2021-08-30 at 22.25.11.png

  • Like 5
Link to comment
Share on other sites

 

7 minutes ago, Cassie said:

When you save you SVG in illustrator (file > export > export as / export for screens) there's an option to use 'presentation attributes' for styling. This makes the SVG a lot more readable, saves on conflicting classes and makes it easier to override styles later on.

I hate when I forget to change this!!! 😠 😠 

  • Like 2
  • Haha 3
Link to comment
Share on other sites

Because I'm guessing it would be obnoxious - rather than posting one of the SVG groups -

 

If you care to check it out - some of them have path classes, some have ellipse classes - guessing there are rectangle classes, etc?

 

Does MorphSVG just ignore - or not work with - everything OTHER than path classes? If so, then... what?

 

And God I'm so hoping that, by going back and renaming each and every bit - as I'll now be animating each and every bit independently - that they all obey the position dictated by the parent SVG? If you care to remove the "hidden" bit in CSS, you can see that the paths are already in the correct positions to each other, relative to the parent SVG? If morphSVG moves them all around, then I'm screwed?

 

And, in the cases where shading exists in one expression, but not in another - is there a quick workaround for animating to and from nothingness? ie There's three shadings in one, two in the next, three in the next, zero in the next? I'm definitely gonna repeatedly run into that hassle? Also, what if the two or three shading need to morph into one?

 

Oh - and the reason for the morphing, as opposed to the opacity - is that I have eye movement, fin movement, and I thought it would look much smoother with morphSVG? But if I'm absolutely WRONG about that - if I'm using the wrong tool, PLEASE tell me? ;) 'Cuz this isn't looking like much fun at all.

Link to comment
Share on other sites

Just trying to get a grasp of where you're at. Bear with me. A few questions.

Do you understand the difference between morphing and transforms?

What are you trying to accomplish in the animation from an art direction/aesthetic point of view?

and yep - you can convert shapes to paths.
 

  • There's a utility function, MorphSVGPlugin.convertToPath() that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM.
  • Like 4
Link to comment
Share on other sites

I'll try to explain as best I can?

 

I have a round eye in one expression - that eye then changes shape in the next expression. I believe that would require morphing, not a tranform?

 

Aesthetically, the hope is to create a smooth animation. The fish is upset, then excited. The hope is to smoothly transition, with as few keyframes as possible, from the upset expression to the excited expression. That morphSVG would negate the need for additional keyframes by "magically" creating them via the morph - so that the transition is very smooth?

 

As opposed to the fins - I'm hoping that would be a much simpler rotation transform? I obviously haven't gotten to that yet - but the hope is to employ limited "random" values to avoid the movements appearing repetitive?

 

But, with the expressions - I most definitely have issues where there's more shading with certain expressions than others.

 

And... I think I'm hoping I'm correct - from reading the responses above - that I should exclude the eye irises - as those might move, but they are never morphed? Hopefully having the non-morphed "groups" residing among the morphed groups won't cause problems?

 

So I believe the morphing would be limited to the eye shape, and eventually the mouth shape, and the shading of the "cheeks" and "brow" to form the various expressions?

 

The aesthetic is that the viewer might believe they're watching a video of a very expressive cartoon catfish.

 

And thanks so much to everyone for their help!

  • Like 1
Link to comment
Share on other sites

I personally think the opacity tween that @Cassie posted looks good. :)

 

That being said, if you want to morph, I'd recommend starting with one group only instead of all of them. Go back to the start group and find out which paths will actually change and name them accordingly. (leftEyeStart, leftPupilStart, rightEyeStart, rightPupilStart, etc.)  Then go to the next group and do the same. This will require a little rework in your vector software, but it'll make the animation much easier. 

 

It all comes down to asset prep. 

 

Answering your question - no - morphSVG won't move your paths around. If they are positioned correctly on top of each other, it should all work well.

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Cool,  I think I possibly maybe understand how to prepare the assets? ;)

 

But... with the shading - where I'm morphing from "this exists" to, aesthetically, "both of these shadings blends into this shading" - or the opposite?  No idea how to deal with that?

 

Also, is there a different workaround to MorphSVGPlugin.convertToPath() for non-paths? If there aren't many, then no problem - but if there are, then that would get very repetitive? I obviously have no idea?

Link to comment
Share on other sites

On 8/30/2021 at 4:35 PM, Creek said:

But... with the shading

I'm not sure what you mean. Are you talking about the gradients?

 

On 8/30/2021 at 4:35 PM, Creek said:

If there aren't many, then no problem - but if there are, then that would get very repetitive?

You don't need to convert each one individually. You can convert all of them with one line:

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

You can also convert them to paths in your vector software before you export.

 

  • Like 2
Link to comment
Share on other sites

Very sorry - I have many instances where paths are present in one instance, and they don't exist at all in another.

 

So they need to morph either from nothing or back to nothing? I think I realize why that's not possible - but maybe there's a trick?

Link to comment
Share on other sites

41 minutes ago, Creek said:

So they need to morph either from nothing or back to nothing? I think I realize why that's not possible - but maybe there's a trick?

You can hide them via an opacity (or autoAlpha) tween. I did some of that in my SVG Wars morph demo. You can see some of the timelines have pieces which are animated to autoAlpha:0. You could scale them to 0 as well.

 

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

  • Like 1
Link to comment
Share on other sites

Thanks very much for everyone's patience and guidance today.

 

I'm just gonna step aside and try to come at it again tomorrow. Only updating with that idiocy as I don't wish to just hurl my computer through the window without first thanking everyone for trying to help?

 

I don't know how many illustrations I'll end up dealing with - but I now must properly name each and every path within those files, corresponding to every other file, creating dummy paths for instances where there are no paths.

 

It's not that horribly difficult - but I was SO HOPING - here's one drawing, here's the other drawing - and... magic morph!

 

Sadly not the case.

 

 

 

 

 

 

Link to comment
Share on other sites

Ok pal. Before you smash your laptop here's a *really simplified* pen to show you what I'd recommend.

I'm afraid there's no magic '*animate this*' code that you can pass your fish into.

SVG animation and animating with code takes time to understand and master and the prep takes planning.

What I would suggest is to figure out which bits need to change and which will stay the same.

Pupils - stay the same across all expressions, so you can keep ONE set. You can then move the pupils around to make it look like the eyes are moving
Shadows - four shadows, these are complicated shapes and morphing will likely look a little odd. (I've added a commented out example so you can see what I mean), I'd recommend fading between them.
Outer eyes - four simple circle shapes, these are nice and simple so they're good for morphing.

Delete any extra little shadows or decorative paths that aren't necessary. Simple is key.

I organised them into those groupings and saved the file and optimised it. You'll see it's *much* tidier and easier to work with.
Everything but the starting expression has opacity="0" set inline.

Then there's just a few tweens needed. 🥳

Not everything will need morphing, opacity fades and transforms will work in a lot of cases. 

Does this help? If you have any questions - shoot.

See the Pen WNOrYqm?editors=1011 by GreenSock (@GreenSock) on CodePen

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

VERY COOL!!!! It's gonna take me (quite) a bit to unpack all of this, but SO AWESOME to actually see how it might actually work!

 

Oh - and my meltdown yesterday was more of a frustration with dealing with trying to set up naming conventions. AND there were quite a few paths joined that maybe did NOT need to be joined. So my first attempt to morph from one background shading to the next? As you noted, that didn't come off so awful perty. Then I quickly fell even further out of my depth trying to fix that with the findOrigin script - when there just is no fix available - not the way the shading was joined.

 

And I completely hadn't imagined the opacity fades could mix with the morphing so well! That's a really cool trick!

 

But, again - at the moment, I can only appreciate what you've done. It's gonna take me a bit to digest it enough to possibly have any questions ;)

 

 

 

  • Like 1
Link to comment
Share on other sites

No worries pal, I know how frustrating it can be.

My best advice is to step back from the SVG itself and plan out on paper. Work out which elements you need and how you're going to animate them, then put on some good tunes and get some snacks and spend the time organising the file.

Then the animation bit is easy 🥳

  • 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.
×
×
  • Create New...