I used a number of tools for creating animations. Very simple gif animations in gimp, with very few frames. because in gimp each frame is a layer and that gets very unhandy. With Aseprite, a tool for pixel graphics and animations, it is possible to have layers as well as a timeline of frames. Using this tool, I created a quite complex animation to illustrate how web push works. The style of this animation looks quite cool. I tried a Video Cutting software, but its focus on adding effects and less on doing animations made it very little effective for my use cases. For presenting a technical concept in a presentation using google slides, I created for each frame a new slide. This works, it has its own charm, but it needs good planning ahead how the animation should look like. because when finding afterwards that a change is needed, that means basically to start over or update all slides. A quite simple animation I made with it, had 400 slides. The presentation was a success, But I spend a number of evenings to get the animation work.
So at some point I wanted to try to code an animation. I decided to code the same animation I made using the slides. After trying MoJS I ended up with AnimeJS because of its awesome timeline feature. And it turned out, I was able to implement a first prototype of a declarative animator plus the animation itself, And it took me less than half the time of creating each frame. Also once I have the animation is running, I can just record my screen and generate a video or animated gif file if that is needed.
<div id='animation1' style='height:300px;'></div>
you can check the code for the examples: