Easing

Thanks to George McGinley Smith

Metro 4 includes a several easing function to create animation effect.

What this

Easing can really bring life to an effect. Easing controls how an animation progresses over time by manipulating its acceleration.

Easing can be applied when using the m4q.animate() method.

Default easing

The default easing function is linear.

Example of usage


                    var duration = 3000, easing = 'linear';
                    var callback = function(){
                        console.log('animation done');
                    };
                    $('#myDiv').animate(function(complete){
                        this.style.left = 100 * complete + '%'
                    }, duration, easing, callback);
                

Metro 4 easing funcs

Func name Demo
linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce