reactatouille/template/src/js/utils/animations.js

Reactatouille is a command-line tool to help quickly start and build a new React project, using Redux, Webpack, Gulp (You can add your own tasks, yo!), HMR/Hot Module Reload, Sass (architecture best practices), Jest, Enzyme, popmotion, Redux devtools (bro

import { tween, css, transform } from 'popmotion'
import timeline from 'popmotion-timeline'

const { interpolate } = transform
const onUpdate = (elRenderer, x) => {
  elRenderer.set({
    'x': x,
    'opacity': interpolate([0, 50], [1, 0])(x)
  })
}

export const onReveal = params => {
  if (Array.isArray(params.el)) {
    let tweens = params.el.map(el => tween({ from: 50, to: 0, onUpdate: onUpdate.bind(undefined, css(el)) }))
    tweens = tweens.reduce((acc, v) => [...acc, v, '+20'], [])
    timeline(tweens).start()
  } else {
    const elRenderer = css(params.el)
    tween({
      from: 50,
      to: 0,
      duration: 600,
      onUpdate: onUpdate.bind(undefined, elRenderer)
    }).start()
  }
}