loading words...

Jul 11, 2019 09:07:36

React Pose is great

by @swizecteller | 341 words | 🐣 | 116💌

Swizec Teller

Current day streak: 0🐣
Total posts: 116💌
Total words: 32303 (129 pages 📄)

This is part of a bigger post somewhere else that almost stands on its own. Needs some work.

React Pose is my favorite UI animation library. Makes animation as easy as styling with styled-components.

You define before and after states and Pose sets up transitions for you. Change the pose and your component animates.

Making our `<ExplainerText>` fade in and jump up when it first shows up is a matter of defining `enter` and `exit` states. Or poses as they're called.

```javascript
// frontend/src/FullScreenForm.js

const ExplainerText = posed(styled(Text)`
  width: 80%;
  text-align: left;
  display: inline-block;
`)({
  enter: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: 14 },
})
```

Syntax looks weird because we're combining many concepts. Think of the structure like this:

- a base component 👉 `Text`
- with custom styles 👉 `styled()`
- defined as CSS 👉 ES6 string attached to `styled()`
- made into a posed component 👉 `posed()`
- with enter/exit poses 👉 object argument

You can use this pattern to animate anything. As long as it returns a React component, it works with React Pose. 😍

For enter/exit animation in particular, we need one more step: Wrapping our component in a `<PoseGroup>` on render. 

PoseGroup enables components to animate when React mounts or unmounts them. Mount component, but don't show it just yet. Render it first in the `exit` state and transition slowly to the `enter` state.

Without PoseGroup components just pop into existence. And vanish from the DOM before there's a chance to animate.

```javascript
// frontend/src/components/FullScreenForm.js

const InputComponent = props => (
  // ...
    <PoseGroup>
      {props.meta.active ? (
        <ExplainerText fontSize={[0.5, 1, 1]} key="explainer">
          <strong>Enter</strong> to submit, or{" "}
          <Button variant="helper" type="submit">
            OK ✓
          </Button>
        </ExplainerText>
      ) : null}
    </PoseGroup>
// ..
)
```

The result is a delightful animation.

![](https://i.imgur.com/0xaeuBh.gif)

We used the same approach to create enter/exit animation for the whole fields. Nesting posed groups messed up some of the child transitions, however.

contact: email - twitter / Terms / Privacy