Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animating objects inside morphSVG mask

Recommended Posts

I'm attempting to animate objects within a mask that I'm morphing.


For whatever reason, the objects within the mask do take on the mask - but based on their position as if they had not been moved within the mask?


This is just one in eventually a series of masks - the eyes change shape, and the pupils should be masked within as they move, rotate, etc.


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

Link to comment
Share on other sites

Yep, that's how it's supposed to work. It's totally unrelated to GSAP - it's simply how SVG operates. You've got the clipping path applied to the same element as you're translating, thus it clips it in its normal position and then translates that. 


You could just wrap that in a <g> and apply the clipping path to THAT instead so that the clipping path stays put.

  • Like 2
Link to comment
Share on other sites

I tried wrapping the lower "layers" into another group - and I'm still screwing up? ;)


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


(But I don't understand SVG that well?  But I've done my best - Illustrator just spits it out - and I did spend a TON of time fixing what it just randomly decided to spit out wrong - it just creates tons of groups with individual paths for no reason - which morphSVG obviously doesn't appreciate.) 


But my wrapping is still probably at the wrong level for the masking? I created another sublevel, to no avail?


Everything else so far is working awesome with morph. I just don't know how to get the masking to obey? Again, it just keeps applying to "where" the objects would have been set if they hadn't been moved? ie "I don't care that you moved it. That's where it was originally, you moron! It's CASCADING style sheets - not CLAIRVOYANT style sheets!"


(If Illustrator was horrible with creating SVGs, it's particularly horrible at masking. I think it created multiple iterations of every mask - all of which I tried to rectify. There's a mask, then it creates a defs and yet another clipPath ID that references the original mask? I thought they were masks, but possibly they're "clips"? There's a boundary for the eye - that is the area in which the iris and pupil must always reside. When it breaks those bounds, it would then seem to be "clipping"? But I did look up both just for good measure?)


And I promise that I have absolutely zero understanding of how SVG normally operates. And I've tossed every iteration of what I think I might search for into ye olde search engines. I have absolutely no idea what's going wrong ;)

Link to comment
Share on other sites

Hey @Creek


Yeah, there is a whole lot going on in your demo.

Here is a simplified visualization of what @GreenSock was talking about;




The clip path being applied to the .pupil path that has translations going on on it ...


See the Pen 44cd429ebdc13474c804fc730569f571 by akapowl (@akapowl) on CodePen




... vs. the clip-path being applied to the whole group of the eye - which works much better. 

Maybe this simplified example helps you a bit with getting yours sorted out.


See the Pen 1c0aa1da32a863ffe4fdf3441e2c02aa by akapowl (@akapowl) on CodePen


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

Illustrator has, for whatever reason, created possibly a mess?


In mine - Illustrator has spit out a path for the mask, then "referenced" it within the clipPath declaration? So the morph is applied to what should be the clipPath, but is possibly reference above as just the path - which might possibly be screwing it all up?


I hopefully very obviously have no idea? I have a dozen eye animations - so I need to understand what is going wrong in order to fix whatever nonsense Illustrator is spitting out?


If you wouldn't mind looking at it - the masks are all identified by name as "EyeMask" - for instance, "N_EyeMask_L" and "N_EyeMask_R" - left and right respectively.


I fought with Illustrator to have them named as individual paths, having those individual paths in their OWN layer - but then Illustrator just decided to have "fun" naming them all itself? Then I went back with the SVG code and tried to fix it as best I could, given my zero understanding of SVG? I could supply the original, but Illustrator named them - for instance - "N_EyeMask_L00000007347372734712" and then created a random other named "N_EyeMask_L00000002343922342034", etc. for no reason whatsoever? I just renamed them ALL "N_EyeMask_L_clip" and nothing got even worse? ;)


I have the ability to comprehend what you're relating - but I don't have the ability to apply it to the nonsense that Illustrator has created, despite my best attempt to have Illustrator NOT just "make up" names and randomly repeat them? Much less create self-referencing sublayers?


And I do apologize for all of the .stX junk classes Illustrator created that you see at the beginning of the SVG code. Most of them apply to groups and paths not even in the presented animation? I did my best to reduce it as much as possible - but the opening .stX class junk can hopefully certainly be ignored, reducing the complexity hopefully?


I sadly don't have the education to read what you provided and apply it? I can only "guess" that Illustrator shouldn't have referenced the clipPath with another path and maybe that's what screwed it up?

Link to comment
Share on other sites

16 minutes ago, Creek said:

Illustrator has, for whatever reason, created possibly a mess?


I'm pretty sure Illustrator has its reasons why it puts out things the way it does - like grouping things. It can not know what you are going to use the output for - and for animating often a rather specific setup is needed, that you will have to tweak yourself. I myself am not familiar enough with Illustrator for being able to give you any advice on what you could possibly do better there.


As mentioned, it is pretty much that's going on in your demo.


If you need assistance, it is always best to strip things down to the bare minimum showcasing what you do have problems with. Not only will it help you figure things out easier, but also does it help others figure out what the problem might be and how to possibly find a solution. And with lots of code, that can become quite cumbersome.



Here is your example boiled down to just the left eye - and everything related to that wrapped in a group with the clip-path applied. I did remove all the other clip-paths set to other elements in there - unfortunatelly, I can not clean it all out for you, but a setup like this appears to be working as I would expect it to work.


See the Pen df10519493a5b3e5785ee9f2343d01c5 by akapowl (@akapowl) on CodePen


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

Thanks for showing me that it works.


I honestly can't strip things down - I am doing my best to use GSAP to "cheat" - while hopefully learning more along the way. And I apologize for complaining about Illustrator's export to SVG.


Since you posted your reply, I've been drilling down through my mess to arrive at the same "fix", to no avail so far. I'll pick it up again tomorrow, and hopefully figure it out a bit more? For all I know, I'm making a single typo, and it's all going to Hell ;)


But I have absolutely no idea why it is you removed clipping paths, as you noted in your code - because I just have no idea? When *I* removed what I believed to be the same clipping paths as your code seemed to instruct, I ended up with no clipping whatsoever? I believe I understand the basic concept of clipping paths being applied, but while I kid myself that I think I understand the "why", I obviously have no idea when they should stop?


Just explaining - it's past 4AM here, and I'm beat. I just didn't want to not respond, given you've provided a solution. Hopefully I can revisit with a clearer head - and possibly less typos? - tomorrow and possibly pull it off?


THANK YOU SO VERY MUCH for providing a solution. Hopefully I can work my way further through it tomorrow ;) 

Link to comment
Share on other sites

42 minutes ago, Creek said:

But I have absolutely no idea why it is you removed clipping paths, as you noted in your code


I removed them because you had them a) in multiple places and b) on elements that you are translating with tweens on.

As already mentioned by @GreenSock, that will throw things off. Instead, as suggested, I added the clip-path attribute on the group I created around everything related to the left eye - maybe that's the part you missed.


This setup now only contains things related to the left-eye, so you will also want to create a similar setup for the other eye and maybe even clean it out a bit, too.


  <g clip-path="url(#N_EyeMask_L_clip)">	// <-----

    <g id="Face_Perturbed_11"> ... </g>

    <g id="P_Eye_L"> ... </g>

    <g id="Face_Normal_16"> ... </g>

    <g id="N_Eye_L">  ...  </g>





No worries, I know how hard it can be. Just starting out with things can be overwhelming enough, trying to understand how everything works. Having a wall of code facing you will not be very helpful in that case - that's why it would be best to start small with just a handful of elements - something like in my initial examples -  and work your way up from there, adding piece by piece and seeing what it changes.


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

I edited my original, believing that I was following your exact prescription, confining myself to the left eye?


But, for whatever reason, the masking has "disappeared" altogether? There appears to be no masking whatsoever now?


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



Link to comment
Share on other sites

I finally figured it out!


I was applying the movement to the group id OUTSIDE the clipping path - once I switched that to the group id INSIDE the clipping path - duhr....


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



Link to comment
Share on other sites

You did the opposite of what I suggested....

<!-- BAD -->
<g id="N_Eye_L" data-name="N Eye L">
    <g clip-path="url(#clip-path-4)">
<!-- GOOD -->
<g clip-path="url(#clip-path-4)">
    <g id="N_Eye_L" data-name="N Eye L">

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

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

This is the "logic" I ended up creating in Illustrator, based on your recommendation?




Maybe my brain just completely shorted out - but I'd pulled a major foul and used "Save as..." rather than "Export as..." for the SVG I shared originally here - which caused Illustrator to spit out the multiple duplicated masks. Once I exported "correctly", then I didn't have to remove all of the extraneous clipping paths. They were ALL OVER THE PLACE when I'd created the SVG incorrectly ;)


Basically, in the new "logic", the new Eye L Masked sits inside N Eye L? In that logic, N stands for Normal, then there's A for Angry, S for Sad, etc.


And, as I'm continuing my edumacation - so much other seemingly "random" weird stuff keeps popping up? For instance, hopefully you can see that the gradient is screwed up there in the right pupil. I spent a few hours trying to figure out WHY that kept happening - looked perfect in Illustrator, but obviously off once I exported to SVG.


Apparently just randomly - I had to "guess" at which values were screwed up and then "guess" again at changing to new values - cx="-1822.4" cy="402.44" - which are presented here:


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


Sorry, I know that has nothing to do with the masking issue - just relating that, even when I'm not screwing myself up...  Just tons of really weird stuff seemingly pops up out of nowhere. Non-stop fun and excitement dealing with how Illustrator wishes to export the original artwork to SVG. When the "it just works" principle doesn't apply - best of luck figuring out WHY? ;)


And when *I* make a boneheaded move like I did with creating the SVG incorrectly - the problem with then understanding what it is y'all are communicating? I'm at least hopefully forming a much better understanding of why my CodePens need to be as "basic" to the "issue" as possible - because otherwise, I have basically ZERO ability to comprehend the solutions y'all are kind enough to provide ;)


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.