Adding Basic Animations to React

Megan Mitchell

|

November 1, 2018

Hello React developers! As a dev who is still trying to learn and grow every day, here is a “to the point” post about how I’ve been getting animations out of my head and onto the page. This will only cover basic stuff for now, and I intend to put out another post as I improve and develop better ways of adding animations to my components.

For starters, if you’re interested in adding small animations without downloading an entire library, CSS animations are an easy way to do that. I would personally recommend keeping animations fairly small, as CSS has some limitations as to what is possible. For example, while you can easily animate an element to appear when rendering, there is no time to animate that element as it unmounts. While you can get around this by animating elements in from off-screen, it is not helpful to those using screen readers, and it keeps unused elements on the dom.

Places it makes sense to use CSS include color changes, hover effects, and small, decorative animations; like on a logo for example.

In this example, I apply the animation through a className on the logo itself, running it so that It will always be moving, regardless of the state

What I’m currently excited about though happens to be the React Transition Group library (http://reactcommunity.org/react-transition-group/). What it does is apply a state to your component, which can be used to apply specific styles on the component lifecycle, as well as add and remove the component when the animation is complete.

In the Transition example, these states applied to the component include entering, entered, exiting, and exited. The duration of these states can be a set together as milliseconds, or individually as an object (eg. {entering:300, exiting:500}).

The most important quality of it to me is it’s “exiting” state. CSS lacks the ability to animate on unmount without help, and this library gives you that power. With the ability to animate the removal of an element, there is no need to keep unused elements on the DOM, which will actually improve the accessibility of your platform by not confusing screen readers with hidden components. Animating the ‘exiting’ state also creates a more polished animation that CSS alone can rarely accomplish. I found it incredibly easy to follow, just set styles based on the rendered elements state, though this method is probably better for smaller animations as well.

Within the same library is the ability to use CSS transitions. Like transitions it allows you to apply styles when the element is at different states (keeping in mind that these state names are not quite the same as Transitions). What’s different about this is you apply your styles with classes rather than through inline styles. This is ideal for applying more complicated movements, as well as having reusable and consistent animations for your platform. These can be applied as an object (as seen below) or a string, which is interpreted as “animation” = “animation-enter”, “animation-enter-active”, “animation-enter-done” etc.

Finally, TransitionGroup can be used to manage all child transition objects that exist in a list. TransitionGroup does not actually apply any styles to your components; it’s more or less just a wrapping div with some helper props.

Animations are valuable, fairly simple to begin adding, and increasingly necessary when building the web. While these where very simple additions to my code, they instantly made my project look more engaging, and frankly, we’re pretty fun to work on. Hope you learned something! I’m looking forward to seeing where motion design and animation on the web goes next.

Keep Reading

How to Manage Technical Debt
Hadia Tahir
March 26, 2020

We are often grandfathered into the legacy systems we use in our businesses. Whether it be a for-profit company or a nonprofit...

Why Nonprofits Should Invest in Tech
Soumya Gupta 
March 11, 2020

Before we take a deep dive into the impact technology can have on nonprofits, I want to share a personal experience I had whilst working...

Pillar Event Blog
Erik MacDonald
March 11, 2020

Depending on the nature of their mission, nonprofits face various common and unique challenges when trying to integrate technology into...

Let's Make Something Great Together

Contact Us