react-motion-ui-pack alternatives and similar libraries
Based on the "UI Animation" category.
Alternatively, view react-motion-ui-pack alternatives based on common mentions on social networks and blogs.
-
react-spring
✌️ A spring physics based React animation library -
react-motion
A spring that solves your animation problems. -
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-gsap-enhancer
Use the full power of React and GSAP together -
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 -
data-driven-motion
Easily animate your data in react -
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-atv-img
A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React. -
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 -
react-tween
DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead! -
react-parallax-component
Easiest way to add scroll parallax effect on the component -
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-animatable
A powerful composable animation library for React, built on Web Animations API and React hook. -
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 Firebase alternative introduces iOS support
Do you think we are missing an alternative of react-motion-ui-pack or a related project?
README
☢️ THIS PROJECT IS NO LONGER MAINTAINED 💀
Please use react-spring for all of your animation needs.
React Motion UI Pack
React Motion is an amazing animation library for React. React Motion UI Pack tries to help ease entry level / common use cases with React Motion by providing a higher level way to work with it and create common UI transitions easier. If you need more complex animations I suggest using React Motion directly.
Usage
yarn add react-motion-ui-pack
npm install react-motion-ui-pack --save
<script src="https://unpkg.com/react-motion-ui-pack/dist/react-motion-ui-pack.js"></script>
(UMD library exposed as `Transition`)
Example
import Transition from 'react-motion-ui-pack'
// Animate a list of items as they are added
<Transition
component="ul"
enter={{
opacity: 1,
}}
leave={{
opacity: 0,
}}
>
{ this.state.items.map(item =>
<li key={item.id}>{item.content}</li>
)
}
</Transition>
// Animate a modal
<Transition
component={false} // don't use a wrapping component
enter={{
opacity: 1,
translateY: spring(0, {stiffness: 400, damping: 10})
}}
leave={{
opacity: 0,
translateY: 250
}}
>
{ this.state.modalOpen &&
<div key="modal" className="modal__content">
// modal code
</div>
}
</Transition>
Props
component
: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, isElement])
Define the wrapping tag/component around the children passed in, pass false
to not use a wrapping component at all for only child components.
runOnMount
: PropTypes.bool
Determines whether the animation runs on mount or not
appear
: PropTypes.object
Where the animation starts, defaults to leave value if nothing passed
enter
: PropTypes.object
The resting state of the animation
leave
: PropTypes.object
The ending value of the animation
onEnter
: PropTypes.func
Callback right before an element enters, passes in your current animating values onEnter={currentValues => /* do something */}
called only once.
onLeave
: PropTypes.func
Same as onEnter
, but fires multiple times as an element is leaving.
FAQ
How appear
, enter
, & leave
work
These values are automatically wrapped in a React Motion spring
to keep the API simple. If you need a custom config you can pass your own spring e.g. spring(22, { stiffness: 30, damping: 300 })
.
My animation values aren't being applied to any elements
If you decide to use a custom component as a child, style
and dimensions
props will be passed into that component for you to use however you want. If you pass a regular React DOM element, <Transition/>
will take care of applying the values for you by cloning your element and passing it in.
Running Locally
clone repo
git clone [email protected]:souporserious/react-motion-ui-pack.git
move into folder
cd ~/react-motion-ui-pack
install dependencies
npm install
run dev mode
npm run dev
open your browser and visit: http://localhost:8080/