FlipJS -The only limit is your imagination.

Include the file in your HTML, and write your first animation with flip.

<div class='cubic'></div>

<script>

Flip({

selector:'.cubic',

infinite:true,

css:{

width:100+'px',

height:100+'px',

margin:'40px auto',

background:'red'

},

variable:{

rotation:Math.PI*2

},

transform:function(matrix,param){

matrix.flip(param.rotation)

}

})

</script>

This animation starts after dom ready, so you don't need to worry about timing.
For more details, please check construct options and animation events
## Calculation Parameter
To translate an element from 20 to 100 in x direction, you can write directly:

Flip({

....

transform:function(mat){

//this.percent increase from 0 to 1 responding to animation from start to end

mat.translate(20+80*this.percent);

}

})

But this is not an optimistic way, because possible distance changes will make the code difficult to maintain. It is recommended to write code like below:

Flip({

immutable:{

sx:20

},

variable:{

dx:80

},

transform:function(mat,param){

mat.translate(param.sx+param.dx)

}

});

//or

Flip({

variable:{

tx:function(percent){return20+80*percent}

},

transform:function(mat,param){

mat.translate(param.tx)

}

});

We want the math formula and css rules decoupled with the data, making it easy to debug and reuse.
When updating, the animation combines the immutable and variable values to one object, then pass this object to function transform(mat,param) and function css(css,param).
As the name suggests, immutable values keep the same in every frame, while every variable value is multiplied by animation percentage.
See matrix section for more information about the above animation.

Animation

-percentage

-immutable:{

a:any param:{

b:any a:immutable.a,

} ---> b:immutable.a,

-variable:{ c:variable.c * percent,

c:number d:variable.d(percent)

d:function(){} }

}

Animation Components

The amazing effects take efforts and many elements.
Suppose we want a two-sides card and make it rotate, this requires at least 3 elements,
You may write the code according to the HTML elements to make the animation as a whole component, see the details

<div class='flip-card'>

<img class='front-side'>

<img class='back-side'>

</div>

<script>

//details are omitted

//'&' represents the animation selector, which means '& img' will be '.flip img' when applied

Flip({

selector:'.flip',

css:{

'&':{},

'& img':{},

'& .front-side':function(css){}

'& .back-side':function(css){}

},

transform:{

'& .back-side':function(mat){},

'& .front-side':function(mat){}

}

})

</script>

In this way, you can also use the animation for other elements, just change the selector and animation options.
With your cool imagination you can have your special animation toolkit!
#Animation Continuation
Combine animations in sequence is another aspect of "async programming". The easiest way to do this is to use callbacks.

Flip.animate(optA).on('finish',function(){

//do something

Flip.animate(optB).on('finish',function(){

//do something

Flip.animate(optC)

});

});

"The Callbacks Hell" comes with the increasing amount of animation. In the callback way, It is tedious to control the orders.
Imaging after animation B we need start C,D together and wait both of them to finish before starts animation E, you don't want your code like this