.
Welcome to motionia.js
A built-in yet super customizable 1 stop solution to animations in CSS.
The Ultimate & smart JS animation library!
Simple fast , flexible & easy to integrate. No need to write page long CSS Keyframes that consumes a lot of time and no need to waste a lot on their customizations.
you might have seen many tons of library that offer to animate using javascript , but you would need to first define them a lot even for a small piece of animation.
In motionia.js the concept or core utility is entirely different as compared to others.
Core concept
The main motive or core concept is to find a way to animate DOM elements easily without much configuration and to deal with repeating typo of codes that we face as a frontend developer while building applications.
In technical terms , using data-attrbutes
to animate elements rather than traditional way.
Simple type in one of the built-in animation name and pass it to data-motionia
attribute and let the browser render the js behind it.
The library contains more than 40 built-in animations.
You can easily customize any of the animation property via prefixing data-
behind them inside markup.
Below snippet shows how you would slide a element to right side by 100 px or any amount.
Example:
<div data-motionia='slide' data-right='100px'></div>
Simply further read customizations
If you wanna animate elements in group proceeds to group animating