Animation

Perform a custom animation of a set of CSS properties.
domQ uses Web Animations which is the latest javascript API for Animations
Parameters
1.keyframes : object / array
2.speed : string / number
3.easing : string
4.callback : function
Animation Settings
any animation related settings Parameters can be passed with inside keyframes
Example
1
domQ( 'p' ).animate({
2
    direction: "reverse",
3
    iterations: "2"
4
});
Copied!
please refer MDN reference for detailed info on animation settings Parameters
Element.animate() - Web APIs | MDN
Easing
by default animation api runs with browser supported easing which are
1.linear
2.ease
3.ease-in
4.ease-out
5.ease-in-out
You can also pass custom easing value like cubic-bezier(0.42, 0, 0.58, 1)
Please check for custom easing functions
Easing Functions Cheat Sheet
Example
1
domQ( 'p' ).animate( {
2
   opacity: [ 0.5, 1 ],
3
   transform: [ 'scale(0.5)', 'scale(1)' ],
4
   direction: 'alternate', // Setting
5
   duration: 500, // Setting : Supported Values [ 'slow', 'fast' ,'default' ]
6
   iterations: 20, // Setting
7
}, function( element ) {
8
   alert( 'Element Animation is finished' );
9
​
10
   // element variable is actual element object. 
11
   // you can do what ever you want to do with it.
12
   domQ( element ).hide(); 
13
} );
Copied!
Quick Links
core/animate.js at main · domq-js/core
GitHub
Source File

Getting Started

Next - Collection Methods

Attributes

Last modified 1yr ago

Export as PDF

Copy link

Contents