JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Motionia is a lightweight simplified on demand animation library! https://git.io/motionia
    Filed under  › 

    • 🔾11%Overall
    • 320
    • 176 days
    • 🕩10
    • 👥2

    Alt Text

    The Ultimate & smart JS animation library!
    GitHub stars GitHub license


    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 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.

    Alt Text

    <div data-motionia='fadeIn'> hi!, i am a fading in text! :)
     </div>
    

    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:

    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?

    Alt Text

    Motionia on github

    Experiment with it here

    Alt Text

    Documentation

    Docs: 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.

    Alt Text

    Installations

    Just add a script path of motionia via JSDELIVR into the head of your project

    <script src="https://cdn.jsdelivr.net/gh/abhiprojectz/motionia@latest/dist/motionia.js" defer></script>
    

    Usage

    We have a svg with id as mysvg now we wanna animate it such that animations triggers when it appears in viewport.

    Alt Text

    add a rolling effect from left rollleft

    Alt Text

    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.

    <div data-mationia='rollLeft' data-delay='5s'> rolling from
     left </div>
    

    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!

    <div data-motionia='slide' data-right='200px'>i slide by 200px right</div>
    

    Alt Text

    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.jsa

    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

    myAnim.mo({
    targets: '#div',
    anim: 'rollLeft'
    duration: '5s'
    })
    

    You can also overrides targets on every object no need to initialize motionia more than once.

    Alt Text

    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.

    Alt Text

    Documentation

    grab the docs here: docs of motionia

    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.

    Alt Text

    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.

    Alt Text

    Contribute

    Docs: https://motionia.netlify.app

    This is very important do fork it right now and come up with your ideas!

    Stargazers repo roster for @abhiprojectz/motionia

    Forkers repo roster for @abhiprojectz/motionia

    Alt Text

    Show All