Jakebogan Posted April 7, 2021 Share Posted April 7, 2021 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? Link to comment Share on other sites More sharing options...
Solution PointC Posted April 8, 2021 Solution Share Posted April 8, 2021 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. 6 Link to comment Share on other sites More sharing options...
PointC Posted April 8, 2021 Share Posted April 8, 2021 PS If it's a really complex move, you may need to use additional steps as in-between morphs to get great results. 2 Link to comment Share on other sites More sharing options...
Jakebogan Posted April 8, 2021 Author Share Posted April 8, 2021 Thank you that is perfect for me! 1 Link to comment Share on other sites More sharing options...
PointC Posted April 8, 2021 Share Posted April 8, 2021 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. 2 Link to comment Share on other sites More sharing options...
Cassie Posted April 8, 2021 Share Posted April 8, 2021 OMG - puppet warp tool. This is a gem of knowledge. 😍 3 Link to comment Share on other sites More sharing options...
PointC Posted April 8, 2021 Share Posted April 8, 2021 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. 2 Link to comment Share on other sites More sharing options...
OSUblake Posted April 9, 2021 Share Posted April 9, 2021 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!!! 4 Link to comment Share on other sites More sharing options...
PointC Posted April 9, 2021 Share Posted April 9, 2021 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 comment Share on other sites More sharing options...
mikel Posted April 9, 2021 Share Posted April 9, 2021 My recipe a little trial & error and remove the ****. See the Pen VwwwGrd by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 7 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 11, 2021 Share Posted April 11, 2021 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 comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now