Jump to content
Search Community

Possible Quick Fix for Mending Flipped Start/End Points - MorphSVG?

Creek test
Moderator Tag

Recommended Posts

I don't even know if my assumption is correct - just guessing based on the odd behavior?

 

Rather than a frown being turned upside down via shearing - imagine instead that the creator in Illustrator instead chose to rotate it 180 degrees? 

 

So point A on path1 is on the left, point A on path 2 is then on the right. Enter morphSVG and terrible unhappiness ensues? ;) (I have no idea if this is true - again, just guessing based on the odd behavior?)

 

In trying to remedy this situation, I ran across a post somewhere (?) indicating that I might use a special scissor tool (?) in Illustrator, snip on the left of both objects - and then point A and point A possibly "agree", after which they might live happily ever after again via morphSVG?

 

Trouble is - I don't know how to do that. I'd have to learn how to use the scissor tool? And the somewhere post related that Illustrator sometimes just doesn't care what you do if it wishes to declare where point A must be? Also I don't even know if that's what the problem is? And this is just one of possibly dozens or more instances within the Illustrator file? For all I know, the artist's preferred method is rotating 180 rather than shearing? Or Illustrator just enjoys mixing things up a bit when it exports to SVG? So I possibly have the opposite point As all over the place?

 

If that's the case - again, I have absolutely no idea? But if that is the problem, then hopefully there's a trick where hopefully I don't have to play around in Illustrator and can instead just instruct morphSVG to reverse, switching out point A with point Z, to work backwards through the morph?

 

I honestly have absolutely no idea. All I know is that this doesn't seem to be behaving as I'd expect?

 

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

Link to comment
Share on other sites

Hi Creek.

I would probably simplify this with a scale animation.

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



Failing that - if you really want to use a morph I recommend simplifying the path itself so that the morph isn't trying to translate the difference between a ton of path points. From experience - it will work, technically - but the results aren't always aesthetically pleasing.

Here's a very stripped back example - I've hand coded these paths to keep them nice and succinct and easy for morphSVG to morph between.

 

You'll notice the only path point that's actually changing is the apex of the curve.

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



You can also do object > path > reverse path direction in illustrator which may help you in future, but that's not what you need here.

  • Like 2
Link to comment
Share on other sites

Thanks, Cassie.

 

This is just an example. The illustrator is providing me the artwork. I don't think scaling works, because I'm dealing with two different - original pieces of art I guess is the best way to put it? Just as a hypothetical, the concept that the "appearance" of the final artwork can't be modified and that the illustrator is not the animator?

 

Hopefully obviously absolutely not complaining - but I don't "get" why a smile shape wouldn't more easily translate into a frown shape? I honestly absolutely have no comprehension as to "why" what's happening is happening? I'm literally confused as to the concept of why - if I'm hunting a shape index - that a flat line is not one of the shape indexes? Logically, tell it to NOT exceed a certain width - to recalculate or whatever it's doing until two vertical (or horizontal if reversing a sideways curve?) points are never beyond a certain width apart?

 

Trying to find out if I could arrive at a simpler solution, I had Illustrator convert the curve with the calligraphic stroke into an outline. I was hoping that would "remedy" the situation - like the scissor snipping trick? - where, in converting, Illustrator would say "Okay, I'll make A to the left for both of these then."

 

Basically, I at least don't wish to recreate all of the original artwork? ;) This smile to frown problem is likely only one of the many problems I'm going to encounter? I am obviously going to fervently HOPE that the issues are few and far between - but I won't know that until... I know that?

 

Which is a very long way of saying - "OH PLEASE isn't there an easier way?"

 

And, in this instance, most definitely the artist is NOT me, the one trying to animate it. And this particular instance - smile to frown - obviously looks horrible the way I've attempted so far? And that line is just one of the components, but a key component obviously, of the facial features that are being animated as the facial "expression" changes.

 

I understand I certainly can't pester folks here as I encounter additional instances where things go wacky  ;) 

 

But I do know - that, in the instance of the smile becoming a frown - I absolutely MUST figure this out. Morphing is absolutely key to that particular animation. So I'll have to at least try to recreate it from scratch or whatever hurdles I'm facing to get it right? In the animation, the mouth will hopefully be very expressive, and there might even be instances where even a couple of seconds elapse as a smile keyframe morphs into a frown keyframe? 

 

In this particular instance - other than the calligraphic stroke - I believe this is a very simple curve? The stroke is just thicker with one than the other? So that would be a definite set of points I'm guessing? But possibly all of that gets bastardized in the export to SVG? There is possibly no such thing as a calligraphic stroke in SVG, so Illustrator just "creates" whatever looks closest? I quite literally obviously have absolutely no idea?

 

At shapeIndex of 0, it seems very odd what's going on over there on the right? Some "extra" point just "lives" over there for some weird reason? I can't find that weird point in the original Illustrator file - it doesn't seem to exist there? Maybe Illustrator just randomly creates it on export?

 

Again, just so just HOPING there might be an easier fix? Certainly not "complaining" if there isn't - but most definitely HOPING?

 

I'm gonna open the exported SVG in Boxy SVG and try to see if I can better manipulate it there? But, again - I have no idea how many instances I'll encounter - thus the hoping that I can maybe possibly avoid that Hell? ;) 

Link to comment
Share on other sites

44 minutes ago, Creek said:

Basically, I at least don't wish to recreate all of the original artwork?

I do quite a lot of SVG animation and have worked with a decent amount of illustrators getting artwork prepped for animating. 

A huge part of the work involved is either personally redrawing and organising paths so that they are easy to be animated, or teaching the illustrators how to do this.

 

This isn't an issue with your graphics editor, nor a morph SVG issue. It just takes time and patience to learn the techniques and structure and optimisation needed in order to streamline the process into something relatively stress free.

The only advice I can give you is to start with the basics of SVG and get a solid base understanding. *Or* learn to frame the frustrating hurdles as teaching moments. You won't figure it out in a day.

The article I linked to will explain how to achieve your smile to frown morph. It will involve redrawing the shape to simplify it. This is just par for the course.

 

 

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

EDIT: Sorry, now it works? It automatically chose 2 - at 0, it was still reversing? Very sorry.

 

Is there any particular reason why Illustrator is creating this mess on export - can I instruct it NOT to do that? ;) The artist used the calligraphic stroke, and Illustrator is just making a mess of it, creating all of the points?

 

Very sorry, I had posted this at the same time as you posted your reply.

 

And.. WHY is shapeIndex 2 apparently very happy with this, but going nuts with the original?

 

------------------- Pre-Edit -------------------

 

I am most definitely screwing up big time ;)

 

I have simplified both of these down to 4 points each - but, as "seems" to be the case with the previous curves - the points are being reversed. If point A is the furthest point to the left of the smile, then it becomes the furthest point to the right on the frown?

 

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

Link to comment
Share on other sites

I don't know the proper etiquette for posting - sorry if I'm not supposed to post another reply - but it's a different "related" issue?

 

I forked the shapeIndex - and the box is obviously in the way? Did I just screw it up when I forked, or was I not supposed to fork it?

 

Obviously, I'll have to use it quite a bit as I'm figuring everything out - and I most definitely screwed something up with the animation being behind the box?

Link to comment
Share on other sites

8 minutes ago, Creek said:

Is there any particular reason why Illustrator is creating this mess on export - can I instruct it NOT to do that? ;) The artist used the calligraphic stroke, and Illustrator is just making a mess of it, creating all of the points?


There's no such thing as a calligraphic stroke in SVG-world. SVG strokes don't have variable width - again, Illustrator is not messing anything up.

It's just important to understand how certain techniques translate over in export, if you want to create a shape, use the pen tool and draw it out point by point, or use simple shapes.

Link to comment
Share on other sites

15 minutes ago, Cassie said:

That looks fine to me! I don't know what you mean by 'point a' I'm afraid.

 

If you wouldn't mind setting the shapeIndex to 0 - you'll hopefully see that morphSVG is morphing the farthest Left point (what I'm referring to as point A) to the farthest Right point - so if we call the farthest Left point "L" and the farthest right point "R" - morphSVG with 0 is mapping L to R.

 

Possibly that's a fundamental issue with the SVGs that have been created?

 

What I'm asking is if morphSVG is trying to "read" whatever SVG code - and the two are bassackwards to each other?

 

Logical - one is L-M1-M2-R, and the other is R-M2-M1-L? I certainly didn't intend to create it that way - and I'm not certain what "command" would correct that?

 

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

 

Also, I still don't know why the findShapeIndex() UI is in the way? It's just floating around, sometimes in front of the shapes? Maybe I screwed up when I forked it?

Link to comment
Share on other sites

3 minutes ago, Creek said:

I forked the shapeIndex - and the box is obviously in the way? Did I just screw it up when I forked, or was I not supposed to fork it?

 

Obviously, I'll have to use it quite a bit as I'm figuring everything out - and I most definitely screwed something up with the animation being behind the box?


We try to keep these forums focused on GSAP-specific questions. They're largely staffed by volunteers -  If you have questions about  anything specific to GSAP we're happy to help but we can't help you fix layout in demos that you're forking.

 

2 minutes ago, Creek said:

If you wouldn't mind setting the shapeIndex to 0 - you'll hopefully see that morphSVG is morphing the farthest Left point (what I'm referring to as point A) to the farthest Right point - so if we call the farthest Left point "L" and the farthest right point "R" - morphSVG with 0 is mapping L to R.

 

Not sure what the issue is here - you can change the shapeIndex - that's what it's for. Some shapeIndex settings will look strange.

Alternately reverse the path using the illustrator method I outlined further up the thread.

 

shapeIndex

The shapeIndex property allows you to adjust how the points in the start shape are mapped. In order to prevent points from drifting wildly during the animation MorphSVGPlugin needs to find a point in the start path that is in close proximity to the first point in the end path. Once that point is found it will map the next point in the start path to the second point in the end path (and so on and so on). Due to the complexity of vector art there will be times that you may want to change which point in the start path gets mapped to the first point in the end path. This is where shapeIndex comes in.

  • Thanks 1
Link to comment
Share on other sites

3 minutes ago, Cassie said:

We try to keep these forums focused on GSAP-specific questions. They're largely staffed by volunteers -  If you have questions about  anything specific to GSAP we're happy to help but we can't help you fix layout in demos that you're forking.

 

Very sorry - I didn't know the proper etiquette -in the future, I'll post additional replies rather than editing earlier replies with additional information. I didn't know if posting multiple replies in a row might seem obnoxious?

 

But I am most likely doing something horribly wrong? I probably don't understand how to properly use this?

 

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

 

I thought I was supposed to fork it and toss in my own svg and modify the javascript to reference the corresponding paths in my SVG?

 

But maybe I'm not supposed to do that? Is there a simpler way to use that tool? Maybe it's a drag and drop interface or something - ie I just drag my SVG file into the window of the original to test it? I very honestly have no idea - that's why I forked it and presented it here in that fashion?

 

 

Link to comment
Share on other sites

Oh, also - if, after running that tool, if the "auto" shapeIndex is acceptable - do I still need to specify the shapeIndex? Or, if the auto one works, can I omit the shapeIndex parameter? Or is it "best practice" to provide a shapeIndex where possible?

 

Thank you SO VERY MUCH for all of your help!

 

gsap.to("#N_LowerLip", {duration: 3, morphSVG:{shape:"#P_LowerLip", shapeIndex:5}});
 
Link to comment
Share on other sites

Oh, also - I clearly have NO CLUE what I'm doing. I promise that I try my best, I scope the search engines - which usually lands me back at this forum - trying to find solutions BEFORE pestering anyone here ;)

 

But I am doing my best to keep notes - possibly I can provide some version of a Complete Idiot's Guide to GSAP once I complete my project? ;)

 

Honestly, the MAJOR bummer is that every time I learn anything, I found out I have to learn something else to understand the first thing I didn't understand, which most of the time leads to me having to learn something else to understand the something else to finally grasp the first thing.

 

BUT - for the most part - GSAP just WORKS!!!! And I'm always amused at myself as to how stupid my questions seem once I finally grasp the fourth or fifth dimension of things I didn't have a CLUE about ;)

 

So I do so greatly appreciate everyone's help - and especially your PATIENCE with me. THANK YOU SO VERY MUCH!!!!!

 

For instance - with this issue - thanks to all of the info you provided - I opened Boxy SVG for the first time, loaded up the offending "paths" - just started obliterating all of the nonsense extra paths Illustrator created on export, believing that they were screwing everything up -

 

And then I feel like an idiot for having asked the question in the first place. But I wouldn't have figured it out without your guidance ;)

 

But I still very honestly don't understand the proper way of using the shapeIndex tool?

 

If it's offensive for me to fork that - if I'm just using it completely the wrong way? There is a TON of code I have absolutely NO CLUE in the javascript in that particular demo and I have no idea what ANY of it means, other than "Oh, I'll switch out that path with the path from the SVG I just replaced in the HTML" -

 

So, to the best of my extremely limited knowledge, I just forked it, tossed in my offending morph paths - and I now I think I hope I "get" why the GUI is floating in front? Because maybe the SVGs are so huge they need all of the space in the background?

 

I'm not a fan of editing anything on CodePen - so normally I just export whatever and edit the dist version in VSCode. Probably because I'm such a noob, trying to edit within CodePen? That's a freaking nightmare for me. Trying to highlight anything for delete or edit? It just jumps and highlights EVERYTHING. Ah well...

 

Again, thanks so very much for all of your patience as I continually adjust to the learning curve ;)

Link to comment
Share on other sites

 

3 hours ago, Creek said:

I thought I was supposed to fork it and toss in my own svg and modify the javascript to reference the corresponding paths in my SVG?


Sounds like you're using it correctly. It's just a visual aide to help people understand how shapeIndex works, no drag and drop or complexity to it.
You can use CSS to position your SVG differently if you need to?

See the Pen qBjQmKJ?editors=1100 by GreenSock (@GreenSock) on CodePen

 

2 hours ago, Creek said:

if, after running that tool, if the "auto" shapeIndex is acceptable - do I still need to specify the shapeIndex? Or, if the auto one works, can I omit the shapeIndex parameter? Or is it "best practice" to provide a shapeIndex where possible?


Yes, you can omit it. shapeIndex is just an option - if auto works you don't have to specify anything. It will default to auto.

 

2 hours ago, Creek said:

every time I learn anything, I found out I have to learn something else to understand the first thing I didn't understand, which most of the time leads to me having to learn something else to understand the something else to finally grasp the first thing.

 

Sounds like learning to code! It takes a long time to build up all the little bits of satellite knowledge and then the strings to connect them.

 

It shouldn't be a 'major bummer' though. Especially seeing as you're learning to animate a fish... Compared to a lot of things you have to learn in this industry animating fish is definitely on the fun side of things!

 

Don't be so hard on yourself, everyone starts off not understanding anything. We've all been here. Just take it slowly.

  • Like 4
  • Thanks 1
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...