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.
-
framer/motion
Open source, production-ready animation and gesture library for React -
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-router-transition
painless transitions built for react-router, powered by react-motion -
react-anime
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React! -
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) -
react-gsap-enhancer
Use the full power of React and GSAP together -
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-motion-ui-pack
Wrapper component around React Motion for easier UI transitions. -
gooey-react
The gooey effect for React, used for shape blobbing / metaballs (0.5 KB) 🧽 -
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-track
Track the position of DOM elements. Create cool animations. -
react-web-animation
React components for the Web Animations API - http://react-web-animation.surge.sh -
react-atv-img
A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React. -
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 -
react-animatable
Tiny(~1kB) animation hooks for React, built on Web Animations API. -
react-ts-typewriter
Easy to use typewriter component written with Typescript and React 18+ in mind -
auto-size-transition
A component that scale dynamically according to the internal size -
react-scroll-rotate
Very simple react component for rotate element based on scroll position -
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. -
react-tsparticles
A lightweight component to easily create interactive particles animations
Appwrite - The open-source backend cloud platform
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