Discussion on "Animate your React App with Pose"

Seth Corker · 2019-06-23T18:52:02.008Z

How to bring your React app to life with animation using Pose Animation on the web can be challenging because there are many ways to achieve the same goal. You could use CSS to achieve transitions or more complex animations or you could try one of ...

Hi Seth,

Thanks for the article. Something got my attention here,

#Why should I add animations to my web app? If you aren't fully convinced why you should use animations in your React app, allow me to champion some reasons.

You use React/Vue already If you already use a modern component based JS framework like React or Vue, you already know the benefits. React allows for interfaces that are dynamic and responsive for users. Animation is made easier than ever with React and doesn't have to be a nightmare.

To be honest, this doesn't make any sense. Animations are flavor to your application and makes user experience delightful and better. But that doesn't mean if you are using React or Vue you should use animations.

One thing to keep in mind is animations comes with its own cost. Extra code, extra storage, extra cpu. So if your goal is performance, every single bit counts. One thing to keep in mind, and I think most developers nowadays miss this point, not everybody has your super power boosted machine.

Thanks Serdar,

You're right, if performance is a concern then it is important to accommodate users on lower powered devices. I'm not advocating you add animations every time but I think animations when used correctly can enrich the user experience.

What I was trying to allude to is the use of animation can help contextualize actions for the user and communicate that your app is doing something.

A modal with a slight fade-in or slide-in may be less jarring than simply appearing.
An spinning activity indicator says to the user that the UI is not unresponsive and performing a task
A subtle glow on a button can grab the user's attention for an on-boarding experience

As with anything, you don't have to add animations to everything and you shouldn't all the time but if you do, I think Pose is a good way to do it for developers. It's easy to use and much more flexible than other approaches I've come across. The mantra of the web is progressive enhancement, if you can achieve a performant experience on lower-end devices but cater to powerful devices too, it's a win-win.

Search Hashnode

Animate your React App with Pose

Responses2