react-tween-time

react-tween-time

Bare Necessities for React Animations

Install

npm install --save react-tween-time

Usage

import React from 'react'
import { easing, useTweenTime } from 'react-tween-time'

const Example = () => {
  // after 1000 milliseconds t scales from 0 to 1 in two seconds
  const [t] = useTweenTime({
    startAt: 1000,
    mode: 'autostart',
    duration: 2000,
    easingFn: easing.inOutQuint
  })
  return (
    <div
      style={{
        transform: `translateX(${t * 100}px)`
      }}
    >
      Moving...
    </div>
  )
}

Control manually

const [t, anim] = useTweenTime({
  startAt: 1000,
  mode: 'manualstart', // does not start automatically
  duration: 2000,
  easingFn: easing.inOutQuint
})

// start animation
anim.start()
// pause animation
anim.pause()
// continue paused animation
anim.resume()

React to the animation end

const [t, anim] = useTweenTime({
  onEnd: () => {
    /* animation has ended */
  }
})

License

MIT © terotests