Skip to main content
New Participant
September 3, 2018
Answered

How to warp like puppet tool without puppet tool ?

  • September 3, 2018
  • 2 replies
  • 12418 views

Hi there, im using bodymovin, making animations for web. I recently made a animation : https://cdn.discordapp.com/attachments/255467682076426242/486164852675575808/Blunk.gif (Not sure if you can open that)

But its a simple anim, with puppet tool where the eye gets a bit warped.

The thing is, bodymovin does not support puppet tool.

Any help would be greatly appreciated!

This topic has been closed for replies.
Correct answer Rick Gerard

I'm not familiar with BodyMovin but it looks like it's just an SVG exporter and it requires some hand coding. If that is truly the case you need to keep everything vectors to maintain a small file size SVG. Puppet Pin turns things to pixels. The distortion in your eye is caused by inexperience with puppet pin. You can fix that, but you can't keep it vectors without some additional work.

You have two options.

  • Refine your puppet pin until the animation looks ok, pre-compose, auto trace, and then get rid of the pre-comp in the main comp
  • Don't use Puppet Pin and just animate the paths used to create the blinking eye.

There is a third option, forget SVG, fix the puppet pin, make sure that you don't have any identical duplicate frames in the animation, export a lossless movie, import the lossless movie to Photoshop, adjust the timing of each frame in the Photoshop timeline, then export an animated GIF from Photoshop.

2 replies

New Participant
September 3, 2018

Thanks for the answer gonna try the first one, the animation is the not the problem is the fact that bodymovin plugin cannot render the puppet tool. Everything is vector, from the bodymovin forum it seem to be puppet tool like the effect it self cannot be added, through its exporter.

Rick GerardCorrect answer
Braniac
September 3, 2018

I'm not familiar with BodyMovin but it looks like it's just an SVG exporter and it requires some hand coding. If that is truly the case you need to keep everything vectors to maintain a small file size SVG. Puppet Pin turns things to pixels. The distortion in your eye is caused by inexperience with puppet pin. You can fix that, but you can't keep it vectors without some additional work.

You have two options.

  • Refine your puppet pin until the animation looks ok, pre-compose, auto trace, and then get rid of the pre-comp in the main comp
  • Don't use Puppet Pin and just animate the paths used to create the blinking eye.

There is a third option, forget SVG, fix the puppet pin, make sure that you don't have any identical duplicate frames in the animation, export a lossless movie, import the lossless movie to Photoshop, adjust the timing of each frame in the Photoshop timeline, then export an animated GIF from Photoshop.

New Participant
September 3, 2018

Hey read your message again I see what you mean now!

Thank you very much the first one worked well!