Lite.js

A lightweight ( 5kb minified ), bare bones, javascript animation engine with some handy easing functions.

Fork me on GitHub

Basic usage:

        
          const Lite = require('lite.js')

          const box = document.getElementById('box')
          const tween = Lite.to({ scale: 1 }, 2000, {
            scale: 0.3,
            onUpdate(obj) {
              box.style.transform = `scale(${obj.scale})`
            }
          })

Color:

        
          const Lite = require('lite.js')

          const box = document.getElementById('box')
          const tween = Lite.to({ r: 81, g: 45 , b: 186 }, 1000, {
            r: 0,
            g: 150,
            b: 136,
            onUpdate(obj) {
              const rgb = [obj.r, obj.g, obj.b].map(Math.round)
              box.style.background = `rgb(${rgb.join()})`
            }
          })

Loop animation:

        
          const Lite = require('lite.js')

          const box = document.getElementById('box')
          const tween = Lite.to({ rotate: 0 }, 10000, {
            rotate: 360,
            onUpdate: function(obj) {
              box.style.transform = `scale(0.4) rotate(${obj.rotate}deg)`
            }
          }).loop()

Easing:

        
          const Lite = require('lite.js')

          const box = document.getElementById('box')
          Lite.to({ rotate: 0, scale: 0.2 }, 2000, {
            rotate: 180,
            scale: 0.8,
            onUpdate: function(obj) {
              box.style.transform =  `scale(${obj.scale}) rotate(${obj.rotate}deg)`)
            },
            ease: Lite.ease.inElastic
          })