react-tween alternatives and similar libraries
Based on the "UI Animation" category.
Alternatively, view react-tween alternatives based on common mentions on social networks and blogs.
-
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) -
React Native Circle Menu
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion -
react-web-animation
React components for the Web Animations API - http://react-web-animation.surge.sh -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers -
anim-react
simple js react animation, animation hook, web Animation interface, onclick animation, onview,onsight animation, without css animation, no transition animation, js animation class usage.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
Do you think we are missing an alternative of react-tween or a related project?
README
react-tween
DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead!
Tween animation for React components
Usage
Animate props with Tween
.
function Example({ color, ...props }) {
return (
<Tween
style={{ color }}
>
{style => (
<div
style={{ backgroundColor: style.color }}
/>
)}
</Tween>
);
}
Customize easing, duration, and delay.
import { easeCubicInOut } from 'd3-ease';
function Example({ color, ...props }) {
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
).
function Example({ meetings, ...props }) {
return (
<Tween.TransitionGroup
styles={meetings.map(meeting => ({
key: meeting.id,
style: {
opacity: 1,
},
data: meeting,
}))}
willEnter={style => ({ ...style.style, opacity: 0 })}
willLeave={style => ({ ...style.style, opacity: 0 })}
>
{styles => (
<div>
{styles.map(style => (
<div
key={style.key}
style={{ opacity: style.style.opacity }}
>
{style.data.title}
</div>
))}
</div>
)}
</Tween.TransitionGroup>
);
}
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.
function Example({ color1, color2, invalidationCounter, ...props }) {
return (
<div {...props}>
<Tween
group={invalidationCounter}
style={{ color: color1 }}
>
{/* ... */}
</Tween>
<Tween
group={invalidationCounter}
style={{ color: color2 }}
>
{/* ... */}
</Tween>
</div>
);
}
Comparison to react-motion
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