Twinjs NPM | npm.io

Twin.js

Simple but powerful tweening library. WIP

Installation and import

npm install --save twinjs

import { Tween } from 'twinjs'

Quick Start

import { Tween, easing } from 'twinjs'
  
const objectToTween = {  
  material: { opacity: 1 },
  position: { x: 0, y: 0 },
  rotation: { x: 45, y: 0 },
  scale: 1,
}

const tween = new Tween(objectToTween)  
  .to(
    {
      material: { opacity: 0 }, // Nested values with unlimited depth
      position: {
        y: -5,
        // Value of x will be calculated at each update
        // Super useful for responsive animations
        // You can use one tween for both mobile and desktop
        x: () => window.innerWidth < 1000 ? 10 : 0,
      },
      scale: '*0.5', // Relative values. +, -, / and * are available
      // You can also use all of this in combination!
      rotation: () => ({ x: '*2', y: window.innerWidth < 1000 ? 180 : 0 }),
    },
    1000 // Duration in ms
  )
  // Default easing is inOutPower1
  // All often used easings are included
  // You can also write your own custom easings
  .easing(easing.inOutExp)
  .delay(1000) // Delay in ms
  // Run the tween. Updating is handled automatically.
  // You can also use .start() and .update()/.progress() to have full control over the tween
  .run()

Easings

You can see all the easings in action here: https://easings.net/
All easings(except linear) have in, out and inOut prefixes
Default easing is inOutPower1

import { Tween, easing } from 'twinjs'

new Tween(...).easing(easing.inOutExp)

linear
Power1. Also called quad
Power2. Also called cubic
Power3. Also called quart
Power4. Also called quint
Sine
Exp
Circ
Back
Elastic
Bounce

Custom easing

import { Tween } from 'twinjs'

// t is in [0, 1] range
function yourCustomEasing(t) {
  // Forward linear easing in first half, but reversed in the second
  return t < 0.5 ? (t * 2) : (1 - (t - 0.5) * 2)
}
 
new Tween(...).easing(yourCustomEasing)

Lerps

Default lerp is linearLerp

linearLerp
expoLerp. Useful for zooming/scaling things. Greensock has great explanation why you might need it

import { Tween, lerp } from 'twinjs'

new Tween(...).lerp(lerp.expoLerp)

Custom lerp

import { Tween } from 'twinjs'

// t is in [0, 1] range
function yourCustomLerp(startValue, endValue, t) {  
  return Math.exp(linearLerp(Math.log(startValue), Math.log(endValue), t))  
}
 
new Tween(...).lerp(yourCustomLerp)

API

class `Tween`

Functions

constructor(target)
to(endProps, duration) - Alias for fromTo({}, endProps, duration)
from(startProps, duration) - Alias for fromTo(startProps, {}, duration)
fromTo(startProps, endProps, duration)
easing(easingFunc) - Sets easing function
lerp(lerpFunc) - Sets lerp function
modifier(modifierFunc) - Sets modifier function
delay(delay) - Sets tween delay
repeat(repeat) - Sets amount of times to repeat the tween
yoyo(yoyo) - Enables or disables yoyo. If yoyo is enabled, tween will alternate its direction at each repetition
reverse(reverse) - Enables or disables tween reverse
duration(duration) - Sets tween duration
start(startTime = performance.now()) - Start the tween. You have to manually call .update() to update the tween
run(startTime = performance.now()) - Run the tween. .update() is called automatically
update(time = performance.now()) - Updates the tween
progress(time) - Updates the tween. Does not take into account startTime, delay or is tween playing/paused or not
pause()
resume()