Jump to content
Search Community

Change MorphSVG and DrawSVG path start points

PointC test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I’ve seen a few questions recently about getting better morphs so I thought I’d share a little tip that may help my fellow AI users.

 

Whether you’ve created your own vectors or downloaded some stock artwork, the scissors tool is a quick way to get better morphs. You can also completely  control the start point of your DrawSVG animations.

 

I have an example using a couple heart shapes. This is just an icon from a collection I downloaded. The designer has the first point in the upper right curve of the heart. That’s probably not the best start point for any type of animations, so that needs to be fixed. 

 

  • Step 1 – Cut that path. Grab your scissors tool (it’s in the fly-out menu under the eraser). Line that up with the anchor point at the bottom point of the heart and cut. You’ll now have two anchors at that location.
  • Step 2 – Select the points at the cut location and then join them together. It’s under the Object --> Path –-> Join (or Ctrl+J shortcut.) That is now the new start point of the path. 

ad6vp8R.jpg

You can now export the SVG.

 

Here’s the difference with DrawSVG. 
You can see on heart one (as originally designed) the path starts drawing from an unnatural position. In heart two I’ve made that cut at the bottom and the animation feels better and animates the way a heart would naturally be drawn.

 

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

 

Here’s the difference with MorphSVG
Again, the first heart and star are left as the original designer created them. You can see the morph looks pretty good, but it has a bit of a twist to it.

 

I used the scissors on both heart two and star two with a cut right at the center of the bottom. This morph looks much more natural. The bottom point of the heart splits into the bottom two points of the star and the twisting motion is now gone.

 

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


There's your hot tip for Valentine's Day. Happy tweening and morphing everyone.

:)


 

  • Like 10
Link to comment
Share on other sites

I'm glad you found the tip helpful @Michael Barsotti.

 

You made an excellent point about determining path direction. I use the arrowhead 'trick' all the time to see the direction. It is a pretty annoying shortcoming of AI that we have to use arrowheads like that. Most 3D software packages will place a gradient over any spline so you can immediately see the direction and flip if necessary. That would be quite nice for AI, but my requests seem to fall on deaf ears at Adobe. 

 

Happy tweening.

:)

 

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

  • 2 years later...

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...