Practical Guide to Animation in React

Hello, everyone. I'm super excited to talk to you about animations. In our web interfaces, most of the changes happen instantly. You click a button and then boom, some content just teleports onto the screen. But that's not how things work in the real world, right? Typically, changes in state involve some kind of motion and our brains have been wired to understand it because we've been observing physics of the world around us our whole lives. And this can make interfaces feel a little bit mechanical and disconnected from how we naturally expect things to behave. And animation can help bridge that gap.

It can help make UIs feel more tangible and real and do powerful things for user experience. Like here in the Apple Photos app, when I tap on a picture, it scales exactly from the place I tapped, creating this clear connection between the interaction and the end result. Or this animation when you log in into the Netflix account where avatar animates onto the toolbar. By doing that, it also communicates where you can change your account later after you've logged in. Or think about the calendar interface where clicking between the navigation buttons, the content slides left or right, communicating direction and giving you visual feedback which side you're moving to.

Our brains are also wired to detect motion and Figma uses it by shaking the comment box when you're trying to dismiss an unfinished comment. Or look how Airbnb highlights important information for customers when searching for properties. If animation wasn't there, it would have been really easy to miss. Animation can also be used to add a little bit of joy, whimsy and delight into otherwise static UI. Look at this 3D animated icons in Airbnb. Or this character animation in Notion AI. Things like this might seem small, but they create a personal connection between the user and the UI, and also help them to feel joyful when they are using your product. Especially right now when it becomes easier and easier to generate UI using AI tools, animation and a lot of this attention to detail can really differentiate your product among others.

As developers, we have quite a few tools at our disposal to create animations. We have CSS and some JavaScript APIs and web platform APIs and a lot of libraries. In this talk we'll explore quite a few practical examples on how we can add meaningful motion in our UIs and how we can use all of these tools to do that. But first let me introduce myself. My name is Katrina. I am originally Ukrainian, but I'm currently tuning in from Tallinn, Estonia. And I work remotely at Buffer where I drive our front-end direction. And lately at Buffer I've been investing more and more into UI details like this. We've got quite a lot of content to cover, so let's start.

Let's start with CSS animation. This is the most accessible tool for creating animation we have, and it's a great foundation for most of the animations you're going to create. In CSS, there's generally two main ways to create animations. We can use CSS transitions and CSS animations using keyframes. Transitions are the simplest, they let us animate properties when they change. Like here we are animating opacity over the duration of 300 milliseconds when hovering. Taking start and end values, browser then interpolates all of the values in between to create a smooth transition. This process is also called tween animation, from in-between states that browser needs to calculate. This way we can animate any property that can be interpolated like transforms, opacity changes, colors, padding, width and height, etc.

But sometimes when we want to animate more than between the two states, that's where the keyframes and CSS animations come in. They let us create reusable animations with multiple steps. For example, here we have a spinning animation that we apply to the spinner, but then we can apply the same animation to a completely different element in different contexts. Keyframes are great for any entry and exit animations, for example, like here. Notice that I'm creating a partial keyframe where I'm defining only start or end keyframe, and then the browser will fill in the gap using elements' own styles. Then we can also apply different animation for opening and closing. And also look how here I'm using a duration that's longer for opening than for closing. It makes closing the menu feel a lot snappier. We can also create complex multi-step animations using keyframes, like here, where we shake the element rotating and moving it multiple times throughout the animation. And then by applying it to the common box, we can recreate the same animation from Figma that we saw in the beginning. One big part that can make CSS animations feel a lot more realistic and natural are timing and timing functions. There are five built-in timing functions and ease is the default one, and this can really affect a lot how animation feels.

This is a good example you can see right now. Four drop-down menus opening at the same time, and they all have the same duration, only the timing function is different. But you can feel how some of them are a lot faster than others. And that's the power of the timing functions. They define how animation happens, so the rate of change of the specific volume. Here is a comparison between five built-in timing functions that we have.

Additionally to the built-in ones, we can create custom timing functions using cubic Bezier curves. These are defined by defining two points that control how our curve looks. While you can create your own Bezier curves, for the most part you don't have to. There are amazing people in the community who have already created curves that you can use. Easing.net and Easing Wizards are tools where you can find and customize these curves. Saving these as CSS properties allows easy reuse for animations.

Let's discuss the practical use of different timing functions. Ease is ideal for simple animations like hover effects. Linear suits elements like loaders and marquee elements. The EaseOut family is great for interaction-based animations due to their responsiveness. Accessibility is crucial as animations can cause issues for users with vestibular disorders. By utilizing the Reduced Motion Media query in CSS, animations can be disabled based on users' motion preferences set on their devices.

So the primary use case includes different loaders, marquee elements, skeleton animations, et cetera. One of my favorites for any interaction-based animations is the EaseOut family from the extended set. This typically starts very fast and then slows down towards the end, providing a very responsive feel. Comparing Ease and an exaggerated EaseOut, the latter feels much snappier. Accessibility is crucial, especially for users with vestibular disorders who can experience dizziness and nausea from certain animations, such as large-scale movements, spinning, auto-playing videos, and more. Devices now allow users to set motion preferences, which can be accessed in CSS using the Reduced Motion Media query. It's recommended to default to no animation and add it selectively for better user experience and easier maintenance.

When there is no preference set, a pulsing animation occurs, while reducing motion eliminates animations altogether. However, not all animations need to be removed; subtle changes like opacity and color alterations are generally acceptable. For instance, in menu animations, replacing complex animations with simpler ones like fade in and out can enhance accessibility. CSS animations are powerful tools, capable of creating a wide range of animations. Additionally, the Vue Transitions web API, pioneered by the Chrome team, offers exciting possibilities beyond CSS animations.

VUE Transitions - Exploring a New Web API: Discover the Vue Transitions web platform API introduced by the Chrome team, providing innovative animation capabilities beyond CSS. Addressing Accessibility: Emphasizing the importance of designing animations with accessibility in mind to accommodate users with vestibular disorders and utilizing the Reduced Motion Media query in CSS for better user experience and easier maintenance.

And only add animation when it is OK. Once you get into a habit of doing that, it becomes second nature, but also just a lot less code to support. And it's a lot easier to maintain this code down the line.

Now here's the result. When there is no preference, we have the pulsing animation. And when the reduced motion is set, we don't have any animation at all. That said, we don't need to remove animations completely. A lot of the opacity changes and color changes are completely fine.

So for the menu example from before, we can just replace our animation for something more subtle, like fade in and fade out. And then as a result, you can see there is a scaling animation by default. But then if I go and then change reduced motion in settings, you can see that animation is automatically removed and just replaced with gentle fade. And that covers CSS animation. This is our most used tool, and I think you can create the majority of the animations you need using CSS.

But there's also another really cool new web API that I wanted to cover. And it's Vue Transitions. Vue Transitions is a web platform API that has been pioneered by the Chrome team. They are already quite well supported among modern browsers. They're supported in Chrome and Safari and are coming soon to Firefox as well.

But the best thing is that they can be used as a progressive enhancement, meaning that older browsers would still work. They just wouldn't get the animation, which is totally fine. You might have seen this demo from Astro, which was one of the first frameworks that implemented Vue Transitions natively. And this is the kind of native app-looking interactions we can create with Vue Transitions.

Let's see how we can do this. I have this carousel that changes tips when you click next. And currently, it's quite boring. The change just happens instantly. In order to add the Vue Transition, we just need one line of JavaScript. We need to wrap our change with document.startVueTransition. Of course, we need not to forget about any browsers that might not support it and add a fallback. And now just with this one line, you see we've added a gentle crossfade between the states.

To understand what happens, let's look a little bit under the hood, how this works. So when we trigger a Vue Transition, browser immediately pauses rendering. So user doesn't see anything. Then it takes the snapshot of the current state before the transition, executes your update, and then takes the snapshot after the transition. Then it takes these two snapshots and animates between them. If you open the DevTools while transition is in progress, you can actually see the snapshots appearing in the DOM as pseudo elements. The browser provides default styles that create the gentle crossfade animation that you've seen.

But this is something we can actually customize, which we'll see later. In order to use this in React, there's a small gotcha. Because React executes state updates asynchronously, we need to tell React to apply the state change immediately, because otherwise, the Vue Transition wouldn't work. So what we need to do is wrap our change also additionally with flushSync. We can abstract this into some kind of reusable hook or a function that then we can use in order to trigger the Vue Transitions. And we can also customize the animation itself.

So instead of the crossfade, which is the default, I can use any custom keyframe for this animation. In order to do this, we first need to tell the browser which element needs to be animated. So for example, here, we want to animate the tip card itself. So we will add the custom Vue Transition name to tell the browser that we want to create a separate Vue Transition for this element. And then we can use the same pseudo element to customize the animation by applying the specific keyframe, duration, the timing function, all of the usual things that you just covered in CSS animation.

We can make animation even more funky, like we can add this flipping effect when they are changed. And all of this is done by the browser, and would be, by default, quite performant. Otherwise, animation like this might have been quite complicated to implement. But this is just the tip of the iceberg. I think Vue Transitions get really powerful when you need to morph elements between different places in the DOM. I have this simple video gallery application. And you might notice that we currently have the video thumbnails in the list view. But then we also have the video player when you open the video, which looks very similarly. So it would be really nice if the thumbnail smoothly expanded into the player, creating this connection visually when you navigate.

So in order to do this, we can again use the Vue Transition name. But the gotcha here is that Vue Transition names need to be unique, so that browser knows how to connect elements between different states. We can use video ID to make sure it's unique. And then we can apply the same Vue Transition name onto our video player. Note that these are completely different elements in different parts of our applications. These are different components. Then we just need to wrap our State Changes with StartVueTransition. And that's it.

Now when I click, you see how the browser smoothly morphs the thumbnail to the video element. Because the browser operates with snapshots, it is totally fine that these are completely different elements. One is the video element, and another one is an image. You can also notice how it also animates smoothly back into its place when you click back. The browser remembers this connection then as well. Of course, animations like this can be quite taxing when it comes to accessibility.

One way I found is that you can just globally disable all of the Vue Transitions that use a custom name. So that it would be just by default disabled when a motion preference is set. By the way, Vue Transitions can also work between pages. There are multi-page Vue Transitions as well, and they're actually supported in React Router as well. In order to use it in React Router, we can just add a Vue Transition prop to the link, which will tell the React Router to wrap this change in navigation with Vue Transition. There are a lot of other helpful functions and utilities that it provides that I don't really have a lot of time to go deep into, but it's all covered in the documentation. Vue Transitions can also work really nicely for lists.

I have here a simple UI for managing users. We can delete and filter them. If I apply the same Vue Transition name onto each of the user cards, they can get animated. First, of course, I need to just wrap everything with a start Vue Transition, and then I can just add the unique Vue Transition name for the list item. Just by doing that, all of these actions like filtering and deletion are animated. Of course, we need to use animations like this somewhat sparingly, because when everything is constantly moving, it can also feel a little bit overwhelming.

Normally, in JavaScript, creating animation like this would have been quite complicated, and it took us literally a few lines of code. One more thing that I really want to mention is that React team is also working on built-in Vue Transition support within React itself. It works on top of the same API that we just described, but then React just does some optimizations under the hood in order to make Vue Transitions work. In order to use this API, there is also a new Vue Transition component that is exported from the React. React will automatically assign unique Vue Transition names and CSS properties to children, and then call the start Vue Transition under the hood when the content changes.

A key part here is that when React triggers, the Vue Transition will be triggered only as part of concurrent React Transition. So when we are using something like useDeferredValue from React, or when we use a React start transition function, or if we are resolving a suspense boundary. Now with these changes, our previous demo works with React as well. Note that this feature is still not stable, it is an experimental API, but I'm really excited for it to be coming and becoming stable. When it does, more frameworks like Next.js already has it in the experimental support, but they will also support Vue Transitions officially.

And that's Vue Transitions. These are super powerful to create native-looking morpheme effects and animations in our applications, and I'm really excited to be able to use this now in modern browsers. So we've covered already CSS animations and Vue Transitions, and these are both very powerful tools, but they have something in common. They are both Tween-based, meaning that you define start and endpoint and duration, and browser interpolates the values in between. This works great for a lot of things, and with a more realistic timing function, we can adjust how the element moves and make it feel more natural.

But getting back to how things work in the real world, that's not how it works, right? When you drop something on the floor, you don't define how long it will take for it to fall. It will fall based on its weight, air resistance, or the force you apply. And the duration will be a result of this physics, and not something you pre-determine. If we think about it, CSS animations work a little bit backwards from that. With CSS, you say move this in exactly 300 milliseconds, regardless of that context. And this brings us to Spring-based animation, which is a way for us to achieve more natural-looking animations in the UI.

Springs feel alive and responsive. This is why animations in iOS feel so good. They're all based on Springs, and everything has a little bit of weight and momentum. So the way Springs work is that you can imagine your element tied to its target position by a spring that pulls it towards its target position. And then, depending on the spring itself, if it is stiffer, it will pull harder. If it is looser, it will pull more gently. There is also resistance from the environment and also mass of the element itself. And animation is the result of all of these forces working together. We don't have a lot of time to dive deeply into the physics of Springs, but there's this amazing article from Josh that I really recommend to check out that goes into a lot more detail.

So how do we use Springs in React? There's a lot of libraries that allow us to access the Spring physics, like gsap for example. There's React Spring and there's also FramerMotion, which is right now called just motion. So it is the same library, just rebranded. And this is the one I want to focus on.

Motion has amazing documentation. It also has a big and extensive community. It works with vanilla JavaScript and Vue, and has intuitive and declarative API, and I really like it. Let's see how we can use it by animating this switch. First, we need to import motion, and then we can replace any on a HTML element with motion version of that element. It is basically a wrapper that has all the same features native element, but adds us some specific animation superpowers via props.

The nice thing about Spring-based physics is how natural they feel. For example, here is the comparison between motion and CSS transition. When I click rapidly, you can see how much more responsive the Spring feels. It can change its direction mid-animation naturally, and so it feels a lot more responsive and alive. We've covered some of the basic Spring animations with toggle, and now let's talk about one of the most powerful features of motion, which is layout animations.

When I click rapidly, you can see how much more responsive the Spring feels. It can change its direction mid-animation naturally, and so it feels a lot more responsive and alive. We've covered some of the basic Spring animations with toggle, and now let's talk about one of the most powerful features of motion, which is layout animations. They allow us to animate changes in size, position, or order without any manual calculation.

For example, we have this tabs component here, and I would love to animate this indication so that it moves when I switch between the tabs. If I were to do it in JavaScript, I would need to measure the width of each tab, calculate its position, animate between them, handle window resizes and font resizes, so it would have been quite a lot of work. But with motion, it's really easy. We just replace what you have here, like a basic setup of tabs with Redix, and absolutely positioned indicator.

We just need to replace our span with the span from motion, and then we can apply to it layout ID. This works similarly to the view transitions, so motion will actually track this element and automatically animate it between its different positions and sizes. And now, just with this change, when I switch the tabs, you can see that our indicator animates between different states. Though, if you do look closely, you can see there's a little glitch happening with the border radius. This happens because motion uses CSS transforms under the hood to create the animation, which sometimes introduces certain quirks, and border radius is a very common one.

Luckily, the fix is very simple. We just need to explicitly set the border radius so motion knows to take it into account in the animation. And now, with this change, it works really smoothly. It looks very nice and satisfying, doesn't it? Of course, we wouldn't run the animation so slowly for the real users, so let's talk a little bit about the configuration options that we have.

Motion gives us transition props through which we can configure the spring behavior, and there's two main ways to configure it. One is the simplified one using the visual duration. Note that visual duration is not actual duration. It only means when most of the animations should look completed. And then, additional to the visual duration, we also provide bounce value, meaning how much the element will overshoot. This is very intuitive and works great for simpler animations.

Like here, for example, when I adjust the visual duration, you can see how it immediately slows down. But then if you add a bounce, it adds the overshoot. If you reduce the duration, it starts looking very jumpy. So you can create a completely different feeling, more playful versus more smooth by just adjusting these two properties. And then we can also use a more advanced control via direct access to spring physics. This can feel a little bit complicated in the beginning, but it's a bit easier when we look at the example.

So when we adjust stiffness, it controls how aggressive our spring is and how aggressively it pulls. With higher stiffness, the element is pulled a lot more strongly. Dumping controls the resistance of the environment, affecting the oscillation. Mass determines the heaviness of the object, impacting its speed. Adjusting these properties can completely change the animation's feel.

Motion Studio is a tool in Motion that allows experimentation with various values to understand their effects on animations. Experimenting and developing intuition over time plays a significant role. Accessibility concerns lead to MotionConfig's ability to disable animations selectively. Layout animations offer versatile possibilities for animating traditionally non-animatable elements.

Animating SVGs is made easy with Motion, allowing for dynamic effects like those seen in applications such as Claude. Motion enables the creation of hand-drawn animations and sophisticated icon animations effortlessly. The Motion community provides resources and prebuilt animations for users to leverage. Motion offers a platform to create unique and visually appealing effects through SVG animations and icon manipulations.

By setting reduced motion to user, all motion components will automatically disable all transform and layout animations, while preserving any animation for other values like opacity and background color. Layout animations open possibilities to animate traditionally non-animatable elements like flex and grid layouts, transitioning between different states. Motion allows for creating animations similar to a demo from its documentation, showcasing the usage of layout animations. Animating SVGs is simplified with Motion, enabling the creation of dynamic effects like those in the Claude desktop application.

Animating SVGs with Motion extends to animating individual elements separately and adding delays for staggered animations. Motion facilitates the creation of hand-drawn animations and sophisticated icon effects by manipulating SVG elements. Leveraging Motion, users can access prebuilt animations from the Motion community to enhance their projects with visually appealing effects. The talk concludes by highlighting the benefits of CSS animations, view transitions, and Spring-based Motion for various animation needs.

The speaker emphasizes the versatility of CSS animations for simple state changes, hover effects, entry/exit animations, and repeatable animations. View transitions offer native-looking transitions between pages or larger animations, becoming increasingly supported by browsers. Motion provides a more sophisticated animation solution with natural-looking effects, interoperability, and a realistic feel, albeit with the trade-off of an increased bundle size. The audience is thanked for their attention and encouraged to implement more animation and motion into their applications.