What is the best practice to learn character animation?

[Rio]

I wonder how I can start learning character animation with GSAP.

I'm guessing combining motionPath and MorphSVG could lead us to interesting works.

 

While I was searching web, I found Rive.app that specializes in this area.

Animations that drawn in the following link looks ideal to me.

https://rive.app/#runtimes

Did anybody create something like that with GSAP?

 

However, I really want to stick with GSAP as there are still many things I need for my web app.

 

 

[GreenSock]

I'm not familiar with Rive, but it looks very nice for very particular types of animations for sure. I haven't done much character animation myself, so I can't say for sure but I suspect that's something that requires a very specific type of toolset to do well. Obviously GSAP can animate literally any property of any object that JavaScript can touch so it should be useful but it wasn't designed specifically for character animation. I wish I had more experience in that to offer you more advice, sorry. 

[PointC]

Rive looks pretty neat.

 

Chris Georgenes just did a little character thing at Adobe Max using Animate.

https://www.adobe.com/max/2021/sessions/creating-awesome-social-media-animations-using-ado-s559.html

 

You may also want to look at Spine.

http://esotericsoftware.com/

 

Happy tweening.

 

[PointC]

PS The puppet tool in Adobe Illustrator combined with MorphSVG can create some interesting characters too.

 

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

 

Happy tweening.

[Rio]

Thanks, @GreenSock and @PointC !

 

As you said, MorphSVG has the potential to open up a new method of character animation. Playing with Rive, I was reminded of MorphSVG as the shapes (SVG) deformed one after another. However, one problem that Rive has and GSAP doesn't is resizing the result to fit the viewport.

Using sprite is like classical cell animation. ex; PIXI.JS.https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5 This might be worth to try. Plus, GSAP has its plugin.

 

Whichever method is more suitable to me, I have to think about how to integrate it with my application. I plan to integrate user-uploaded photos and character animations to generate a kind of greeting card.

 

So, it seems the versatility of GSAP wins out imo.

Any thoughts in this regard?