Animating React

I’ve been experimenting a lot with animations in React.

CSS transitions in an app can go a long way. But, if you are trying to create a PWA that even resembles a native experience… you need more.

So, I’ve been playing with React Spring.

It’s quite easy to get going with now that they have a hooks based api.

Here’s a quick demo:

Here are two codepen examples:

1. Menu Opening
2. Pushable Button

Note: I’ve turned the animations up almost too much in these demos.

I’ve found it really easy to add some flip cards and other animations to SPA apps as of late once you get the hang of the library. You pretty much just end up animating either a width, transformation, or opacity styl…and then spreading these styles into the animated div/button/html element you pull out of react spring.