3. Helper functions

Where can I find helpers?

All helpers are contained in helpers folder. Suddenly

Group tweens

Group helper accepts array of tweens and calls its methods on ALL passed tweens.

Usage

import NanoTween from 'nanotween'
import { group } from 'nanotween/helpers'
import { linear } from 'nanotween/easings'

const tweenA = new NanoTween()
  .duration(1000)
  .on('complete', () => console.log('A completed'))

const tweenB = new NanoTween()
  .duration(2000)
  .on('complete', () => console.log('B completed'))

const tweenC = new NanoTween()
  .duration(3000)
  .on('complete', () => console.log('C completed'))

// Group now have ALL of tween methods and control ALL tweens
const group = new Group([tweenA, tweenB, tweenC])

// Add linear easing to all tweens
group.easing(linear)

// Start all tweens
group.start()
// => A completed (1 sec)
// => B completed (2 sec)
// => C completed (3 sec)

You can also set equal duration or add one handler to all tweens

group.duration(1000).on('complete', () => console.log('Tween completed'))
// => A completed
// => Tween completed
// => B completed
// => Tween completed
// => C completed
// => Tween completed

NOTE: If you want to call handlers only once for all tweens, you can wrap it with _.debounce or _.throttle methods.
P.S. Also I'm working on nanoutils library that has these methods already Group also has .tweens property that contains array of passed tweens:

console.log(group.tweens)    // => [tweenA, tweenB, tweenC]

Chain tweens

Chain helper also accepts array of tweens. But it calls tweens in sequence

Usage

import NanoTween from 'nanotween'
import { chain } from 'nanotween/helpers'

const el = document.getElementById('el')

const moveLeft = new NanoTween()
  .duration(1000)
  .on('update', progress => el.style.left = `${progress * 50}px`)

const moveBottom = new NanoTween()
  .duration(1000)
  .on('update', progress => el.style.bottom = `${progress * 50}px`)

const chain = new Chain([moveLeft, moveBottom])

// Start the first tween
// If some of tweens are working, it will be stopped
chain.start()

// Stop current tween and return to start
chain.stop()

// Play or pause current chain
chain.play()
chain.pause()

// Add events handler. IMPORTANT: Events are different from NanoTween instances
chain.on('start', () => console.log('Chain is started'))

// Also it contains index of current tween and array of tweens
console.log(chain.current)    // => 0
console.log(chain.tweens)     // => [moveLeft, moveBottom]

Chain events

start

Whenever first tween is started

Arguments

• none

---

stop

Whenever chain.stop() is called

Arguments

• none

---

play

Whenever chain.play() is called

Arguments

• index - index of current tween

---

pause

Whenever chain.pause() is called

Arguments

• index - index of current tween

---

complete

Whenever last tween is completed

Arguments

• none

---

step

Whenever current tween is completed

Arguments

• index - index of current tween

---

update

Whenever current tween is updated

Arguments

• meta object with meta info
  • value - current value
  • remaining - repeats count remaining
  • completed - how many iterations are completed
• index - index of current tween

Yo-yo

Yo-yo helper calls .reverse() on each step (like 0 -> 0.33 -> 0.66 -> 1 -> 0.66 -> 0.33 -> 0 -> ...)

Usage

import NanoTween from 'nanotween'
import { yoyo } from 'nanotween/helpers'

const tween = new NanoTween()
  .use(yoyo)
  .duration(1000)
  .repeat(Infinity)
  .start()

// It also emits `yoyo` event on reverse with `reversed` flag
tween.on('yoyo', isReversed => {
  console.log(isReversed ? "I'm going back" : "I'm going forward")
})
// => I'm going back
// => I'm going forward
// => I'm going back
// ...

From -> to

From -> to is shortcut for often used tween from number to number or from object to object without callbacks.

Basic usage

import NanoTween from 'nanotween'
import { fromTo } from 'nanotween/helpers'

const el = document.getElementById('progress')

const tween = new NanoTween()
  .use(fromTo(0, 100))
  .duration(1000)
  .on('update', progress => { el.value = progress })

In that example progress will take values from 0 to 100 rather than from 0 to 1

Convert objects

Also it understands objects. Are you remembered example with left/bottom transition?

const el = document.getElementById('block')

const tween = new NanoTween()
  .use(fromTo({ left: 0, bottom: 0 }, { left: 100, bottom: 200 }))
  .on('update', style => {
    el.style.left = `${style.left}px`
    el.style.bottom = `${style.bottom}px`
  })

Custom callbacks

If you want more customization, fromTo accepts callback in third argument that will be applied to values (and nested object values).

const step = word => (from, to, k) => 
  word.slice(0, Math.round(k))

const printWord = word => 
  fromTo(0, word.length, step(word))

const tween = new NanoTween()
  .use(printWord('hello'))
  .duration(1000)
  .start()

// => 
// => h
// => he
// => hel
// => hell
// => hello