Animate

Adds animation to an element property with a defined easing method

How to enable .animate() module?

Modular javascript

If you are using the whole DoMini import, then no further actions are required.

import DoMini from domini;

For individual imports, make sure that the animate module is loaded:

import "domini/dist/domini-core";
import "domini/dist/domini-animate";

Via CDN

If you are using the whole DoMini script, nothing else is required:

<script src="https://unpkg.com/domini@latest/dist/domini.js"></script>

For individual files, make sure the animate file is included:

<script src="https://unpkg.com/domini@latest/dist/domini-core.js"></script>
<script src="https://unpkg.com/domini@latest/dist/domini-animate.js"></script>

Variations

.animate(Object properties, Int duration, String easing)

// Method definition
function animate(properties, duration = 200, easing = "easeInOutQuad") {};

Animates the selected element properties for duration via the easing function name.

// Animate left margin to 200px
$('div').animate({
   'marginLeft': 200
});

// Animate left and top margin to 200px in 1 second, using linear easing
$('div').animate({
   'marginLeft': 200,
   'marginTop:': 200
}, 1000, 'linear');

.animate( properties = false )

Passing boolean false as the properties argument will stop all pending animation frames.

// Stop all previously started animations
$('div').animate( false );

// Restart animations after stopping
$('div').animate( false ).animate({
   'marginLeft': 200
});

Easing

By default only 3 most used easing methods are implemented linear easeInOutQuad and easeOutQuad.

You can add your own easing methods if you want to by extending the DoMini.fn.animate.easing object with an easing math function.

For example:

DoMini.fn.easing.easeInExpo = function(x) {
   return x === 0 ? 0 : pow(2, 10 * x - 10);
}

// then use it:
$('div').animate({
   'marginLeft': 200,
   'marginTop:': 200
}, 1000, 'easeInExpo');