Animation question

[hobiew]

Hi this is more asking for advice than me running into a problem. 

 

I have some characters that I'm using on a website. I would ideally want to animate these characters more complex, like walking, tail curling, swimming, flying etc. I guess I would need the SVG morph to create some smooth transitions. But im really struggling to get this to work correctly. 

 

Do you think GSAP is the correct tool OR would i need to turn to lottie?

 

Any tips/insights are welcome!

[mvaneijgen]

You're asking what to use on a GSAP forum, so the answer you'll be getting would be GSAP 😅

 

I would start by doing some small scale tests, but creating the SVGs with some joints where you know you want to move things (eg the legs) and creating different stats of your 'creatures' so that you can use the morphSVG plugin, would be the route I would be choosing.

 

Hope it helps and happy tweening! 

[Rodrigo]

Yeah this codepen by @Diaco is a masterpiece of SVG character animation and hopefully it provides inspiration:

See the Pen RaXRdE by MAW (@MAW) on CodePen.

 

Happy Tweening!

[Cassie]

Hey hey! So SVG animation with GSAP is great fun and nice and easy if you chop your elements up into bits and use transforms.

See the Pen VwZLrRR by cassie-codes (@cassie-codes) on CodePen.

 

However, depending on the result you're going for, you may want to reach for Rive (not Lottie imo)

When to reach for Rive

1) You need to morph lots of SVG shapes and don't want to have to mess about with lots of asset prep and trial and error
2) You have a lot of joints or more complex movement that would benefit from rigging

Here's a workshop on rigging.

If you can keep the movement simple and the shapes simple, GSAP will do the job, and be less heavy on load. Rive is good fun and great for complex rigging though and you can render to canvas which is also great for runtime perf.

[hobiew]

Very late reply. I decided to just go with GSAP since thats in my comfort zone. But Rive looks really cool. 

 

I ended up doing a lot of cool animations on the website you can view here: https://trueblue-tattooconvention.com/

[Rodrigo]

Looks really nice! 💚 Great job!! 👏🙌

[hobiew]

On 4/2/2026 at 12:09 AM, Rodrigo said:

Looks really nice! 💚 Great job!! 👏🙌

Thank you!!! ❤️