yubaba v2.4.1

yubaba 🧙✨

/juːbaːba/ out of the box animated experiences for React.js 🧙✨

What is yubaba???

It's all about ✨animation over state transitions ✨it can help with:

• 📴 Enabling animations to be possible between disconnected leaf nodes in the React tree
• 🚚 Moving an element from one location to another
• 💨 Revealing elements inside another element
• 👓 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

Installation

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

Tip - Both es and commonjs modules are provided in the package. Make sure to consume the es modules for their tree shaking ability!

Usage

import Animator, { Move } from 'yubaba';

({ isLarge }) => (
  <Animator triggerSelfKey={isLarge}>
    <Move>{anim => <div {...anim} className={isLarge ? 'large' : 'small'} />}</Move>
  </Animator>
);

Next steps

• 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