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-router-transition
Transitions built for react-router, powered by react-motion. -
react-gsap-enhancer
Use the full power of React and GSAP together. -
react-motion-ui-pack
Wrapper component around React Motion for easier UI transitions. -
React Native Circle Menu
⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Made by @Ramotion -
react-spark-scroll
Scroll-based actions and animations for react. -
react-mt-svg-lines
A React.js wrapper component to animate the line stroke in SVGs. -
react-web-animation
React components for the Web Animations API -. -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers. -
react-parallax-component
Easiest way to add scroll parallax effect on the component. -
auto-size-transition
A component that scale dynamically according to the internal children size -
react-tsparticles
A lightweight component to easily create interactive particles animations
Get performance insights in less than 4 minutes
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