Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhiprojectz/motionia
The Ultimate & smart JS animation library! Simple fast , flexible & easy to integrate.
https://github.com/abhiprojectz/motionia
animation generator python solana tool trading-bot usdc
Last synced: about 1 month ago
JSON representation
The Ultimate & smart JS animation library! Simple fast , flexible & easy to integrate.
- Host: GitHub
- URL: https://github.com/abhiprojectz/motionia
- Owner: abhiprojectz
- License: gpl-3.0
- Created: 2020-05-28T13:31:22.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-05T17:35:10.000Z (8 months ago)
- Last Synced: 2024-09-28T09:42:44.830Z (about 1 month ago)
- Topics: animation, generator, python, solana, tool, trading-bot, usdc
- Language: Python
- Homepage:
- Size: 7.11 MB
- Stars: 327
- Watchers: 6
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - motionia
README
---
The Ultimate & smart JS animation library!
---
[](https://twitter.com/abhiprojectz)
> 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.
# Introduction
Motionia.js is a advanced JS library built with the aim of simplicity and customisablilty.
**Rich Api** for all your animation needs in pure javascript , forget traditional method of writing page long css keyframes to animate elements, use the **new way the motionia way!**
head towards the **Docs:** [https://motionia.netlify.app](https://motionia.netlify.app) for more details.
No need of using any kind of **Scroll** library, motionia is independent => No dependencies.
The library is built with best code practices resulting in slow load , **loads in 1.3 seconds only!**
**Alright, so explain me in 30 secs what it is actually?**
Wanna save time? then just animate elements by adding `data attributes`.
```html
hi!, i am a fading in text! :)
```
With a tons of customizations to elements such as delay , duration , repeat , easing , direction etc parameters.
all by using `data attributes` to html parametric elements itself.
Need to animate elements using js for some reasons?
then just use like:
```js
var myAnim = new motionia()
// initialize motionia.js
myAnim.mo({
targets: '#div',
anim: 'rollLeft'
duration: '5s'
})
// targets can be any html parametric element and
// then customize according to your needs!
// using simple JSON like structure.
```
# Where to get?
[Motionia on github](https://github.com/abhiprojectz/motionia)
[Experiment with it here](https://abhiprojectz.github.io/motionia/try/)
# Documentation
**Docs:** [https://motionia.netlify.app](https://motionia.netlify.app)
Go through the docs to get to know everything about the library.
# Examples
Visit my codepen for motionia.js examples and demos and to grasp easily what motionia can actually do.
+ [Abhiprojectz on Codepen](https://codepen.io/abhiprojectz)
+ [Motionia.js - animating the door](https://codepen.io/abhiprojectz/pen/BajyQPq)
+ [Animating backgrounds](https://codepen.io/abhiprojectz/pen/OJMPWbG)
+ [Animating lists](https://codepen.io/abhiprojectz/pen/KKVwoNp)
+ [Animating Loaders](https://codepen.io/abhiprojectz/pen/MWKYVMo)
# Installations
Just add a script path of motionia via **JSDELIVR** into the head of your project
```html
```
# Usage
We have a svg with id as `mysvg` now we wanna animate it such that animations triggers when it appears in viewport.
add a rolling effect from left `rollleft`
## Set a delay of 5s
This is just a small example.
The animation will be triggered as soon as the element appers inside the viewport.
> Note: if you want to trigger element using js then refer the section below.
```html
rolling from
left
```
The supported animation property is a shorthand property which can be accessed for:
+ Animation-name
+ Animation-duration
+ Animation-timing-function
+ Animation-delay
+ Animation-iteration-count
+ Animation-direction
+ Animation-fill-mode
+ Animation-play-state
Refer documentations for more details.
## Sliding a element right by 200px
> No keyframes straight forward text parameters.
use anim name **slide** as `data-motionia='slide'` then specify amount that is `data-right='200px'` & over!
```html
i slide by 200px right
```
# Using js syntax for advanced usage.
You can also trigger animation inside a function like `onclick` , `ontouch` etc or maybe as a result of a function.
Pre-built anims , which uses simple syntax makes it easy to decorate our project easily & without any dependencies.
First of all initialize `motionia.js`a
```js
var myAnim = new motionia()
// initialize motionia.js
```
Now you can create a object and pass parameters in it to customize the anim.
use `.mo` method to pass parameters
```js
myAnim.mo({
targets: '#div',
anim: 'rollLeft'
duration: '5s'
})
```
You can also **overrides** targets on every object no need to initialize motionia more than once.
# Ideas
Many other animation library doesn't provide us built animations but `motionia.js` do.
Trigger it when elements visible in viewport or trigger on a click using easy JS setup.
The `.mo({})` method quite works as a timeline feature.
So, keep going animating by a line.
For brief explanation refer docs.
# Documentation
grab the docs here: [docs of motionia](https://anicode.in/motionia/docs)
# BONUS!
Now comes the **MAIN** part!
The best thing of motionia.js is **mixing up of anims**.
So , it totally depends on your creativity of how you mix the animations.
To rotate & then make a element bigger in size use:
**data-motionia='rotateScaleIn'** we just mixed the animations name.
# Features at a glance
+ 30+ base animations.
+ Animation property customizations.
+ Easy Scroll builtin animation triggering.
+ Mixing Of animations increases the no. of built-in animations thus, makes it lightweight.
+ JSON structure customization.
+ NO dependencies
+ Tested on all major browsers.
# Contribute
**Docs:** [https://motionia.netlify.app](https://motionia.netlify.app)
This is very important do fork it right now and come up with your ideas!
[](https://github.com/abhiprojectz/motionia/stargazers)
[](https://github.com/abhiprojectz/motionia/network/members)
