react-tween-time
v1.0.2
Published
Bare Necessities for React Animations
Downloads
1
Readme
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