Tween animation for React components
npm install react-tweenreact-tween
===
DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead!
---
Tween animation for React components
Usage
---
Animate props with Tween.
``javascript`
function Example({ color, ...props }) {
return (
>
{style => (
/>
)}
);
}
Customize easing, duration, and delay.
`javascript
import { easeCubicInOut } from 'd3-ease';
function Example({ color, ...props }) {
return (
delay={1000}
duration={500}
style={{ color }}
>
{/ ... /}
);
}
`
Animate added or removed items with Tween.TransitionGroup.willEnter
- In this example, the collection is a list of meetings.
- When a meeting is added, it fades in ().willLeave
- When a meeting is removed, it fades out ().
`javascript
function Example({ meetings, ...props }) {
return (
key: meeting.id,
style: {
opacity: 1,
},
data: meeting,
}))}
willEnter={style => ({ ...style.style, opacity: 0 })}
willLeave={style => ({ ...style.style, opacity: 0 })}
>
{styles => (
{styles.map(style => (
style={{ opacity: style.style.opacity }}
>
{style.data.title}
))}
For
, each style is a TransitionStyle, which has the following format.`javascript
{
key, // item id
style: { ... }, // plain style object (same format as style for Tween)
data, // item data
}
` and willLeave are passed TransitionStyles and should return plain style objects.Synchronizing animations
---
By default,
Tweens 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.`javascript
function Example({ color1, color2, invalidationCounter, ...props }) {
return (
style={{ color: color1 }}
>
{/ ... /}
style={{ color: color2 }}
>
{/ ... /}
);
}
`Comparison to
---
Choose 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