Jump to content
GreenSock

pbj

Define Animation anchor point with SVGMorph

Recommended Posts

Trying to figure out how to allow the bottom of the SVG to be anchored to the bottom of a div. This feels like a mix of CSS + GSAP issue so happy to be told to go figure it out :)

 

What's happening now is this animation works perfectly, *except* it transitions from top down to bottom, but we need the opposite. The ideal flow for this animation is that once the user interacts with the page the circular "cutout" transitions into a flat line. 

See the Pen abqYQyW by pbj (@pbj) on CodePen

Link to comment
Share on other sites

Heya!

 

This isn't really a CSS & GSAP issue - it's down to the shapes you're morphing between. So SVG land.

 

You're morphing between the curve and the flat shape at the top of the SVG. If you want to morph  downwards, that flat shape needs to be moved to the bottom of the SVG, not the top.

image.png

 

Here's an easy way to move this path without a graphics editor.

 

SVG paths can have relative points, absolute points or a mix of the two. Absolute points are drawn to a certain point on the canvas, relative points are relative to the point defined just before. If the path is all relative you can use the initial Mx,y value to move the path to a new starting point. I love this little hack because there's no absolute positioning or flexbox or whatever in an SVG, so the usual route people take is to open up the graphic in a graphics editor, move it and resave it. This can be annoying and time consuming.

 

Here's a GUI to create a relative path.

https://lea.verou.me/2019/05/utility-convert-svg-path-to-all-relative-or-all-absolute-commands

Once your path is relative, you can just adjust the y value of the start point and move it to the bottom of the SVG.
The viewBox is 331 units high so we want to position the path around 330 units down on the Y axis - viewBox="0 0 1440 331"

// old - mixed path at the top of the canvas
// x = 1440 y = 14

M1440, 14 ........ etc

// new - all relative path at the bottom of the canvas
// x = 1440 y = 331
M1440, 330 ........ etc


Hope this helps!

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

  • Like 2
Link to comment
Share on other sites

Hey Cassie!

 

This is incredibly helpful! I wanted to confirm one thing: creating a relative path enabled you to then animation correct? 

 

Meaning → You had to create a relative SVG to then manipulate in an editing tool, then manipulate with SVGMorph? We have a few areas where we'll need to do this so wanted to make sure we're doing it correctly!

Link to comment
Share on other sites

Heya,

 

13 minutes ago, pbj said:

Meaning → You had to create a relative SVG to then manipulate in an editing tool, then manipulate with SVGMorph? We have a few areas where we'll need to do this so wanted to make sure we're doing it correctly!

No, not really. I was explaining how to move the end path without using a graphics editor. I changed the path to a relative path so I could move its position. Not sure how to explain further. Maybe read through that post again?

You could also just open the SVG in a graphics editor and move the shape to the bottom. I was just trying to save you time, didn't mean to confuse things sorry. There are comments in the codepen too - maybe they'll help.

Link to comment
Share on other sites

Ahhh okay. I gotcha. I'll keep poking around and re-read the article I was under the impression that article (and tool) just "sort of worked" in that it would translate a path from absolute to relative and then *booom* animation galore! Thank you nonetheless for the quick help!

Link to comment
Share on other sites

I have a whole article about organic morphing which may prove useful for you as well.

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

Bottom line - easy SVG animation comes down to 3 things:

  • Asset Prep
  • Asset Prep
  • Asset Prep

Even though morphSVG can use shapes without the same number of points, I almost always try to use the same number. You can accomplish this by duplicating your start shape and push/pull the points until you get your end shape. The puppet warp tool is also great for that kind of thing.

 

Best of luck on your project and happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

 

Sorry - linking to the article was probably confusing. I just meant this GUI.

 

See the Pen RmwzKv by leaverou (@leaverou) on CodePen

 

36 minutes ago, pbj said:

Ahhh okay. I gotcha. I'll keep poking around and re-read the article I was under the impression that article (and tool) just "sort of worked" in that it would translate a path from absolute to relative and then *booom* animation galore! Thank you nonetheless for the quick help!


The GUI (tool) just allows you to change a path to relative. That isn't related to animation in any way though. It's purely a way to allow you to move the path easily to the bottom of the SVG.

You could also do this in a graphics editor.

 

The key answer here is that the destination path was up at the top of the SVG, and you need to move it to the bottom. This was just one way to do so.

 

  • Like 2
Link to comment
Share on other sites

@Cassie

Sorry to ask this again, in your last comment you said: 
The key answer here is that the destination path was up at the top of the SVG, and you need to move it to the bottom.

Is this a literal position in the SVG?

Link to comment
Share on other sites

Ok. Here's some key bits of info.

SVG is like a bit of graph paper. There's no flexbox or absolute positioning like in HTML. Elements are plotted out on this 'graph'

Your viewbox is viewBox="0 0 1440 331"


That means your 'grid' is 1440 SVG units wide and 331 units high.

Take a look at this snippet again. This is the start of your SVG path. The M means Move To and the two coordinates that follow the M are the x and y values for the start of that path. 
 

// old - mixed path at the top of the canvas
// x = 1440 y = 14

M1440, 14 ........ etc

// new - all relative path at the bottom of the canvas
// x = 1440 y = 331
M1440, 330 ........ etc

 

The Old path was initially drawn starting at 1440 on the x axis (all the way to the right) and then 14 on the y axis (at the top)

I changed those coordinates for you so that the path would be at the bottom 1440 on the x axis and 330 on the y axis

 

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

 

The GREEN path is the old path - the RED path is the new path. 


As I said, you could just open it in a graphics editor, I was trying to save you some time and share something helpful - but I think I ended up making it more complex and confusing everyone.
   

 

 

  • Like 2
Link to comment
Share on other sites

@Cassie

 

This is super helpful! Thank you. Appreciate you being my SVG guardian angel right now :)

  • Like 1
Link to comment
Share on other sites

I need this on a tshirt.

  • Haha 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.
×