Tween
use tween
When you create the instance of Ash.S
, you can set the easing formula for each scripts.
html
<div class='demo_holder'>
<div id="demo_block" class='demo_block'></div>
</div>
css
.demo_block{position:absolute; top:50px; left:0px; width:60px; height:60px; background-color:#64B5F6;border-radius:50%;}
.demo_holder{width: 100%; height: 200px; position: relative;}
javascript
var block = document.getElementById('demo_block'),
myAsh = new Ash.S([{
dom: block,
css:[{left:'0px',width:'60px',height:'60px'},
{left:'400px',width:'40px',height:'40px'}],
time:200,
tween:'bounceEaseIn'
}]);
myAsh.repeat(Infinity);
demo
define your own easing formula
To define your own easing formula, you will need to store it at Ash.Tween
.
/*
* define easing formula
* @param t {num} current time
* @param b {num} beginning value
* @param c {num} change in value
* @param d {num} duration
*/
Ash.Tween.MyTweenName = function(t,b,c,d){
return c*t/d + b;
};
//use it
Ash.play([{
dom:document.getElementById('Hello'),
css:[{width:'100px'},{width:'200px'}],
time:20,
tween:'MyTweenName' // Use your own easing formula
}]);