react-tween
https://github.com/tannerlinsley/react-move instead!
DEPRECATED - RecommendTween animation for React components
Usage
Animate props with Tween
.
{ return <Tween style= color > <div style= backgroundColor: stylecolor /> </Tween> ;}
Customize easing, duration, and delay.
; { return <Tween easing=easeCubicInOut delay=1000 duration=500 style= color > /* ... */ </Tween> ;}
Animate added or removed items with Tween.TransitionGroup
.
- In this example, the collection is a list of meetings.
- When a meeting is added, it fades in (
willEnter
). - When a meeting is removed, it fades out (
willLeave
).
{ return <TweenTransitionGroup styles=meetings willEnter= ...stylestyle opacity: 0 willLeave= ...stylestyle opacity: 0 > <div> styles </div> </TweenTransitionGroup> ;}
For Tween.TransitionGroup
, each style is a TransitionStyle
, which has the following format.
key // item id style: ... // plain style object (same format as style for `Tween`) data // item data
willEnter
and willLeave
are passed TransitionStyle
s and should return plain style objects.
Synchronizing animations
By default, Tween
s animate whenever their styles change. If you want control over when animation begins, set the group
prop. If the group
prop is set, animation only begins when the value of this prop changes. group
is essentially a logical grouping of animations that should run together.
{ return <div ...props> <Tween group=invalidationCounter style= color: color1 > /* ... */ </Tween> <Tween group=invalidationCounter style= color: color2 > /* ... */ </Tween> </div> ;}
react-motion
Comparison to Choose react-tween
or react-motion
based on whether you want tween or spring animation.
- If you want natural, physical motion, use spring animation.
- If you want to specify a duration, or you do not want a bounce, use tween animation.
Setup
yarn
yarn start
# Visit http://localhost:8080