Movigo.js

Ultralight JS library to animate your DOM elements. You can find library documentation on http://movigo.rtfd.io/.

‣

Functions

First function to call is always target function, which takes a selector, a DOM element or more DOM elements as input and return an object of functions. We can divide these functions into action functions, option functions and plugin functions. Every action, option or plugin function return the same object of functions, with a final function: animate, that plays the animation and return a promise (fulfilled at the and of the created animations). Click on `play` button at top left to play animations. 


    const target = movigo.target('div')

    // or:

    const element = document.querySelector('div')
    const target = movigo.target(element)

    target.duration(.8) // Option function.

    target.to({ width: '200px' }) // Action function.

    target.list() // List plugin function.

    // Create the animation and wait for the end.
    await target.duration(.8).to({ width: '200px' }).animate()
‣

Method chaining

As you can see Movigo use method chaining technique, and save the state of the animation in each function. This means that you can break the chain and create new chains with additional functions by building different animations. 


    const slowAnimation = target.duration(1)

    await slowAnimation.to({ width: '100px' }).animate()
    await slowAnimation.to({ height: '100px' }).animate()
‣

Actions

Action functions allow you to change CSS property values. There are currently two function: to and from. Both take an object containing CSS properties and they work like in a CSS keyframe: from values represent the initial state of the animation, to values represent the final state. If from function is not defined, the initial state is represented by the current CSS target properties. To see a full list of available actions you can also use movigo.actions() function. 


    await target.duration(.3).to({
      width: '80px',
      height: '80px',
      borderRadius: '100%',
      transform: 'rotateZ(90deg) translateY(-100px)'
    }).animate()
‣

Options

Option functions allow you to set some properties of the animations, such as duration, speed curve of the transition effect, delays or loops. The number parameter of delay and duration functions must be defined in seconds, easing function parameter values can be found in W3S documentation and loop function take a number of loops or nothing (infinite loop). To see a full list of available options you can use movigo.options() function. 


    await target
        .delay(.5).duration(.8)
        .easing('ease-in-out')
        .loop(2)
        .to({
            width: '80px',
            height: '80px',
            transform: 'rotateZ(180deg)'
        }).animate()

    // Infinite loop:
    // target.loop().to({ left: '100px' }).animate()
‣
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Specific parameters

Option and action functions can get a function as parameter, in which i-th element can be used to define specific element options or actions. 


    const letters = document.querySelectorAll('span')
    const target = movigo.target(letters)

    await target
        .delay((i, el) => i * .05).duration(.4)
        .easing('cubic-bezier(0.4, 0.0, 0.2, 1)')
        .to({ opacity: 1 }).animate()
‣
♥

Feedback

You can create simple animations to make your UI more user-friendly with feedback. 


    await target
        .duration(.1).loop(1)
        .easing('cubic-bezier(0.33, 1, 0.68, 1)')
        .to({ transform: 'scale(2, 2)', opacity: .3 })
        .animate()
‣

Loading

You can create loading animations with a few lines of code. 


    await target
        .delay(i => i * .1).duration(.4).loop(5)
        .to({ transform: 'scaleY(1.5)', opacity: .6 })
        .animate()
‣

List plugin

List plugin allows you to create and manage animations for lists of elements, with slide-in and fade-in effects. 


    const elements = document.querySelectorAll('ul > li')
    const target = movigo.target(elements)

    await target.list().animate()
‣

Focus

Focus plugin allows you to create animations to focus particular elements by scaling an element and obscuring the other background elements. 


    const images = document.querySelectorAll('img')
    const target = movigo.target(images)

    await target.focus({
        element: 1 // Index of focused element.
    }).animate()
‣

Drawer

Drawer plugin allows you to animate sidebars by creating a slide effect and obscuring the background container. 


    const sidenav = document.querySelector('.sidenav')
    const container = document.querySelector('.container')
    const target = movigo.target([sidenav, container])

    await target.drawer().animate()