TWEEN ANIMATION

Value Types

The supported types of a key parameter.

type format example
number translateX: 250
numeric string translateX: '250px'
relative string left: '+=25'
hex|rgb|hsl backgroundColor: '#D2691E'
array [from, to] left: [0, '+=25px']
numeric function 
[ARGUMENTS LIST]
//The curently animated element                                
target: HTMLElement|object 

//The index of the current element
index: number 

//The total number of elements
targetsLength: number
scale: function(el, i, l) { return (l - i) + 1.25; }

CODE EXAMPLE

new TweenAnim({
    keys: {
        left: '+=250',
        backgroundColor: ['#FFF', '#D2691E'],
        scale: function (el, i, l) {
            return (l - i) / l * 1.25
        },
        translateY: function (el, i) {
            return 50 * i
        },
        rotate: function(el, i) { return 360 * ++i }
    },
    direction: 'alternate',
    loop: true,
    duration: 1500,
    easing: 'EXPO_IN_OUT'
}).targets('.el');