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 jQuery .animate() method. The effects helper methods like .show('fast'), .toggle('fast'), fadeIn('fast'), and so on all just use the default easing, "swing."

Default easing

The default easing function is swing. To change default easing you can write:

                    $.easing.def = "easeOutQuart";
                

Example of usage

                    $('#myDiv').animate(
                        { opacity: 0 }, // what we are animating
                        'fast', // how fast we are animating
                        'easeInExpo', // the type of easing
                        function() { // the callback
                            alert('done');
                        }
                    );
                

Metro 4 easing funcs