/juːba:ba/ out of the box animated experiences for React.js 🧙✨
It's all about ✨animation over state transitions ✨it can help with:
- 🚚 Moving an element from one location to another
- 💨 Revealing elements inside another element
- 📴 Enabling animations to be possible between disconnected leaf nodes in the React tree
- 👓 Supporting animations by obstructing elements in view
- 🤫 Hiding children elements until animations have completed to trick users
- 🔢 Orchestrating when animations should start and in what order
- 📝 Composing animations together to create composite animations, for example CrossFadeMove
- 🤯 Anything you can imagine, seriously
yubaba
has a peer dependency on emotion for some of the more advanced animations.
npm install yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x --save
or
yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x
Function as children is a common pattern in yubaba
!
Here's the most basic usage which will animate between small
and large
:
import Baba, { Move } from 'yubaba';
({ isLarge }) => (
<Baba name="my-first-baba" key={isLarge}>
{baba => <div {...baba} className={isLarge ? 'large' : 'small'} />}
</Baba>
);
- First time here? After installing head over to Getting started to start learning the basics
- Interested in animating an element? Check out Focal animations
- For ready made experiences check out Composite components, just grab them and go!
- Having trouble? Maybe Troubleshooting has your answers