animeAnimator

By

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