Table of contents

M4Q Animation

Use m4q animation to animate HTMLElements.

About

The m4q contains functions for animate HTML elements. Animate function used requestAnimationFrame method to executing animation rules.

Animation

To animate element, you can use $.animate function. Global function receive next arguments:


                    $.animate(element, draw, duration, timing, callback);
                
  • element - HTMLElement
  • draw - function or object of properties to animate
  • duration - animation duration
  • timing - easing function name to calculate timing
  • callback - callback function for executing after animation is done
Draw function

Using the function gives you more control over what happens during the animation. Function receive two arguments: normalized timing and timing with apply easing.

Normalized timing has value from 0 to 1. Timing with easing has value from 0 to 1 multiplied by the value of the easing function.


                    var el = $("#dc-1, #dc-2");
                    var startPos = parseInt(el.style("left"));
                    var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;
                    var delta = maxLeft - startPos;

                    btn.disabled = true;

                    $.each(el, function(){
                        var element = this;
                        $.animate(element, function(t, p){

                            var m = $(element).id() === 'dc-1' ? t : p;
                            $(element).css("left", startPos + (delta * m) + "px");

                        }, 3000, "easeInOutBounce", function(){
                            btn.disabled = false;
                        });
                    });
                
Draw object

You can use a plane object for setup animation rules. If you use an object, you must define end value for each property, which is going to animate.


                    var el = $("#demo-cube-2");
                    var startPos = parseInt(el.style("left"));
                    var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;

                    btn.disabled = true;

                    $.animate(el, {
                        left: maxLeft
                    }, 3000, function(){
                        btn.disabled = false;
                    });
                

Animate elements set

You can animate elements set. To animate elements set, you must use set animate function to animate elements set - $(selector).animate(...)


                    var el = $(".c1, .c2, .c3");
                    var startPos = parseInt(el.style("left"));
                    var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;

                    btn.disabled = true;

                    el.animate({
                        left: maxLeft
                    }, 3000, function(){
                        btn.disabled = false;
                    });
                

Stopping animation

You can stop animation with special method $(selector).stop([complete]). The complete optional argument must be boolean and guarantee the end of the animation when true.

Easing function for timing

Thanks to Andrew Ray for easing utils

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.

The default easing function is linear.

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