1

This question is a rebirth of How do you animate SVG for the web? with little additions to modern realities.

My question is this - how to create complex animation for the web? By complex animation, I mean literally cartoon-level animation. I would like to make such an animation that would be tied to mouse scrolling, clicks, hovers, etc. I see that there are quite a lot of JS libraries for animation, but as far as I can tell, they are mainly (as I understand it) designed more for the technical side - that is, for the connection between the user and the user's actions, but it is extremely difficult to do the animation itself in them. I mean, it's not efficient to do the animation itself (cartoon-level) with the help of the JS library when there are more suitable tools for this.

In the last question, a bunch of Adobe Animate + flash2svg plugin was mentioned, but as I can see from their github, the last update was in 2019, which apparently means that this method is quite outdated.

So what are the current ways to create complex animation? My ideal version looks something like this - my animator makes animation in adobe animate (or in other professional animation software), then he export the result for the frontender and he hooks this animation to scroll, hover, etc.

Improve this question

1 Answer 1

Reset to default
2

A more wholistic question where I answered this more specific question as well as other parts related to web animation is What's the best way to animate an illustration for the web?. I recommend going through my answer there fully to get a better sense of animation on the web.

To answer this more specific question in short, it depends on the type of animation that you want to have.

If you want it to look cartoon-y, often times video is the best way. Alternatives to that are using something that can export to the web, like CreateJS if you want something very interactive (basically Flash), Lottie (which exports from Adobe Animate or a web editor called LottieLab), or Rive (which is newer than Lottie and has some advantages). You can also create these by hand using Canvas or SVG but it'll be a painfully long process if your animation is very long. There are also game creators like PlayCanvas, Unity, Game Maker, GX, Godot and many others that can export to a web format.

For other sorts of animation the tooling might be a bit different. For example, for 3D works you might want to use WebGL and tools that export to that.

Improve this answer
5
  • Thank you so much for the tool examples! For clarification - I need tools for 2D animation, which is initially planned frame-by-frame, and then tied to interface elements
    – RoyalGoose
    Jun 23 at 15:18
  • You'll have to be more clear as to the illustration style, level of interaction intended, and responsive needs before I can give you a more direct answer.
    – Zach Saucier
    Jun 23 at 15:25
  • I expect Disney-styled animation, for ex - cuphead game. Main interaction - by mouse scroll it plays as cartoon, by mouse clicking on person it’s acting
    – RoyalGoose
    Jun 23 at 16:06
  • 1
    You likely want to use something like Rive or a game engine then. Again, I highly recommend going thoroughly through the answer I link to at the start of this answer.
    – Zach Saucier
    Jun 23 at 16:26
  • Yep, thank you!
    – RoyalGoose
    Jun 23 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.