All Posts By

Megan Mitchell

Adding Basic Animations to React

By | General, RedBit, Technology | No Comments

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.

Why Animate?

By | RedBit, Technology | No Comments

From GIF’s to Flash to CSS v3, animation has come a long way on the web, and I have no doubt it has a long way to go. Though I’m by no means an expert, here is what I have learned about why we want animations on the web, and how we can keep ourselves from annoying users with them.

For some background, the web is understood to us through two pathways in our brain: the ventral stream and the dorsal stream. The ventral stream is used for understanding static design and content, while the dorsal stream is used for spatial awareness and animation. Because the dorsal stream happens to be relatively faster, we can reduce a user’s cognitive load by subconsciously processing some of our platform’s less important information more quickly, as well as removing change blindness by drawing users eyes to updating elements.

To expand on that a little, some of that “less important information” might include where certain elements might be hidden in your platform. For example, a user might assume a web page’s menu is kept just outside of their field of vision if it happens to slide in from off-screen, or a menu of additional options might be located “inside” the select input if the animation is anchored there. Sliding an element rather than having it simply appear is more natural, and easier to understand to the user

Besides looking good, animating change reduces the chance that your user might miss it (change blindness). This is where that dorsal stream really helps. Movement can signal to your user that something has changed on screen, without derailing their current workflow. Need an example? Think about a point total rising and falling during a video game. It’s likely a small portion of your screen, but it would be important to the player to know if that value is changing. Hence, a small animation would draw the player’s attention when that value changes without interrupting the task at hand.

So why do we want to use animation on the web? While of course, it’s much cheaper to build a static site, animation adds clear value for your client, as well as for the end user. A platform that actively keeps users interested is more valuable than a platform that reads like a newspaper or lets “the product speak for itself”. Like I pointed out before, animation the perfect way to keep users engaged with your platform while creating a smoother or more enriched experience. It makes it easier for users to discover functionality, draws attention to specific points of contact, or simply just add a sense of “delight” to your platform.

As an example of how some of these animations have improved your workflow online, think of mobile devices. Screens may “nudge” in one direction or another to indicate how to access additional content. In the popular design platform Invision, project components that can be interacted with flash blue when a user clicks the page. Animations don’t need to be complicated, they can be as simple as letting the user know that they have interacted with your platform correctly: button text changing from “Click to Pay” to “Payment Completed” for example. The goal here is to use animation to help users complete the task at hand, whether that be filling out a form, editing a photo, or completing a purchase.

So how does purely decorative animation fit into this? Personally, I go with “less is more”, A) because I’m a beginner, and B) because it’s easy to go overboard. A website filled with moving parts and flashing text can confuse users, and functionality can become impossible to discover. Because the eye is always drawn to movement first, it’s best not to keep a flashy ad on your payment page, eh? If something moves, I’m probably going to try to click on it.

Now that you’re adding animation, you get to really add some personality to your platform. Talking about what characteristics a company holds or wants to portray are excellent starting points for designing what movements your components may have. A law firm, for example, may use animations that feel “strong” or “weighty”. A spa might animate using gradients and opacity to portray a sense of calm. An educational site for children could use cartoonish movements, such as “bounce”, “squash”, or “stretch”. The motions themselves should feel natural, the way they might occur if a user was interacting with them in the real world. Something I was told when thinking about movement, is it can be nice to have a touchstone object to come back to when designing (for example, a bouncy ball or marble). Think about how this object may exist in nature, and base your movements on that.

From my experience so far, animations are fairly easy to start and are actually fun to work on. They add value to the platforms I have contributed to, and are a skill that I’m glad I will get to work on as I improve as a developer. In my follow up post (link to Adding Basic animations to react), I will outline how I’ve been working with animations so far, and hopefully, it will be helpful to you too. Hope you enjoyed learning about animations as much as I have