Recently I developed an javascript module for running declarative animations. But first things first.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id='animation1' style='height:300px;'></div>
<script src='../dist/AnimeAnimator.js'></script>
<script>
new AnimeAnimator.AnimeAnimator(animation1, { size:{
width:680,
height:420,
},
elements:[{id:'box1', width: 10, height: 10, top:110, left:0, backgroundColor:'#00f'},],
animations: [
{
id: 'box1',
left: '+=510',
scale: 3,
backgroundColor:'#f00',
duration: 2000,
},
{duration: 200},
{
id: 'box1',
top: '-=50',
backgroundColor: '#0f0',
duration: 250,
},
{duration: 200},
{
id: 'box1',
left: '-=510',
scale: 1,
backgroundColor:'#00f',
duration: 2000,
},
]
})
</script>

examples

you can check the code for the examples:

Contents
  1. 1. examples