Jump to content
GreenSock

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

Animating Animal SVG

Go to solution Solved by PointC,

Recommended Posts

I'm using Adobe XD to make two simple fox svg's. One is red and the other is black. I was wondering how in the world can I get fox 1 (red fox) to animate using gsap to the position of fox 2 (black fox). Is that possible? I was trying morph svg but that didn't animate it like I was hoping it would. Any suggestions?

Screenshot (38).png

Link to post
Share on other sites

Hey @Jakebogan

 

For those types of animations I use the puppet warp tool in AI and usually get decent results with MorphSVG. It's all in how you set up the assets.

 

Here's a really quick demo.

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

 

Hopefully that gives you some ideas. Happy tweening.

:)

 

  • Like 6
Link to post
Share on other sites

PS If it's a really complex move, you may need to use additional steps as in-between morphs to get great results.

  • Like 2
Link to post
Share on other sites

Thank  you that is perfect for me!

  • Like 1
Link to post
Share on other sites

Happy to help.

 

I'd love to see what you come up with when the project is done. If you have a chance, please post back here when it's complete. :)

 

  • Like 2
Link to post
Share on other sites

OMG - puppet warp tool.

 

This is a gem of knowledge. 😍

  • Like 3
Link to post
Share on other sites
29 minutes ago, Cassie said:

OMG - puppet warp tool.

It's one of my favorites since the warp doesn't add/subtract any points. Perfect for MorphSVG and buttery smooth results. 

  • Like 2
Link to post
Share on other sites
4 hours ago, PointC said:

It's one of my favorites since the warp doesn't add/subtract any points. Perfect for MorphSVG and buttery smooth results. 

 

 Make video pleeez!!!

  • Like 4
Link to post
Share on other sites
12 hours ago, OSUblake said:

Make video pleeez!!!

I have a whole section about puppet warps and morphs in the SVG training course I'm working on right now, but that won't be ready for a few months yet. I can probably do a lite version for motiontricks.com in the meantime. :)

 

Link to post
Share on other sites

 

My recipe a little trial & error and remove the ****.

 

See the Pen VwwwGrd by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel

  • Haha 7
Link to post
Share on other sites
On 4/8/2021 at 10:48 PM, OSUblake said:

Make video pleeez!!!

 

Funny enough back in 2017 when they released the Puppet Warp tool for Illustrator they demoed it with a doggie. 🐶

 

 

 

I think Photoshop had the Puppet Warp feature long before CC (CS5 maybe?). Which I recall you can use it with vector items once they are turned into smart objects. That Illustrator Puppet Warp in CC almost makes that app intriguing, almost. 🙃

Link to post
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.

×