Staggered Animation Done 2 Ways In React

In this article I am going to show you how I created a staggered animation first with Framer Motion and then refactored the code to use @emotion CSS-in-JS. The first section describes the advantages and disadvantages of Framer Motion and how I use it for prototyping. The second section shows the example component created with Framer Motion. The last section shows the example component refactored with @emotion/styled.

Framer Motion Advantages

I love Framer Motion. It is an easy to use, flexible, and very powerful animation library. It's performance is quite good as well. Putting together semi-complex animations in which multiple elements animate based on the states of each other is very easy to do with Framer Motion. We can use React features like useState() and useEffect() to easily orchestrate animations based on hover and focus events. One of the largest advantages of using Framer Motion is that it saves the animation state at every frame along the path of keyframes. Meaning, if we are animating based on some state such as hover or focus and then loose that hover or focus the animation can smoothly reverse course and render the animation in reverse back to the original state. With CSS animations our components will immediately snap back to their original states as defined at the first keyframe. This is a consideration you must take into account when deciding if a refactor is going to be possible.

Note: Try hovering over and out on the 2 codesandbox.io examples to see the difference in how the animation reverses when it is interrupted mid animation. With Framer Motion > With @emotion/Styled

Note: You will probably need to hit refresh on the embedded browser window after the code sand box compiles the app for the @emotion/styled example.

Framer Motion Disadvantages

There are 2 primary downsides to using Framer Motion along with useState() and useEffect() hooks to orchestrate hover and focus animations. First, we are re-rendering the component every time we hover or focus on it. Second, there is a price to pay in bundle size. Framer Motion will add at minimum 23.4k to any page that imports it. The Framer Motion documentation claims that we can reduce our initial bundle size to under 5kb using Lazy Motion. However in practice the bundle size of a page that uses even the bare minimum of features is 23.4k g-zipped added on top of our pages bundle size, so if we want animation on our main index/home page the user is going to have to load all of that. Often in practice using it actually adds that 23.4k to the javascript of every page in our app if we end up wrapping the whole app in the Lazy Motion component and splitting our javascript code page by page.

Using Framer for Prototyping

I am going to show you how to create a staggered and orchestrated animation with Framer Motion and then refactor the code to use @emotion/styled CSS-in-JS. Using Framer motion for prototyping has the advantage of being able to easily play around with and fine tune various animation styles quickly. In most cases I have found that my Framer Motion animations actually turn out to be very easy to refactor into CSS, especially when using a library that supports CSS-in-JS, such as @emotion/styled. These libraries allow us to use Javascript variables in our CSS so they can really make the process of refactoring the animation much simpler.

The Example Component

As an an example I will show you the process of refactoring my BlogCard component from using Framer Motion with useState and useEffect hooks to using the @emotion/styled CSS-in-JS API. The component is shown here...

Example With Framer Motion

The code below is a stripped down and altered example of the Blog card that gets displayed in a grid list on this website. The alterations are as follows. I have wrapped the component in <LazyMotion features={domAnimation}> so that it adds as small a bundle size as possible. You would usually wrap a higher order component with this. Wrapping in LazyMotion allows the code to use the smaller m instead of motion import for the AnchorContainer. I have also used style props so that it works in a code playground easily. Better options are tailwindcss or plain CSS modules.

Check out the Framer Motion version on codesandbox.io

/components/BlogCard.tsx
01import styled from "@emotion/styled";
02import { useEffect, useState } from "react";
03import { LazyMotion, domAnimation, m, useAnimation } from "framer-motion";
04
05const AnchorContainer = styled(m.a)`
06  --color-app-primary: 74, 85, 104;
07  --color-app-secondary: 49, 130, 206;
08  --color-text-primary: 227, 227, 227;
09  --color-text-secondary: 255, 107, 0;
10  text-decoration: none;
11  display: block;
12  position: relative;
13  border-radius: 5px;
14  border: 2px solid rgb(var(--color-app-secondary));
15  background-color: rgba(var(--color-app-primary), 0.8);
16  color: rgba(var(--color-text-primary));
17`;
18
19const Pill = styled(m.div)`
20  --color-app-secondary: 49, 130, 206;
21  display: flex;
22  gap: 0.1rem;
23  align-items: center;
24  justify-content: center;
25  border-radius: 0.25rem;
26  padding-top: 0.25rem;
27  padding-bottom: 0.25rem;
28  padding-left: 0.5rem;
29  padding-right: 0.5rem;
30  background-color: rgba(var(--color-app-secondary), 0.65);
31`;
32
33type CardProps = {
34  id: string;
35  date: string;
36  title: string;
37  description: string;
38  tags: string[];
39  style: React.CSSProperties;
40};
41
42export default function BlogCard({
43  id = "refactoring-framer-motion",
44  title = "Refactor Framer Motion For Smaller Bundles",
45  date = "2021-10-10",
46  description = "How to refactor a component from using framer-motion to pure css",
47  tags = [
48    "framer-motion",
49    "refactor",
50    "css",
51    "React",
52    "styled-components",
53    "Typescript"
54  ],
55  style,
56  ...rest
57}: CardProps) {
58  const controls = useAnimation();
59  const [hovered, setHovered] = useState(false);
60  const [focused, setFocused] = useState(false);
61  const [activated, setActivated] = useState(false);
62
63  useEffect(() => {
64    if (focused || hovered) {
65      setActivated(true);
66    } else {
67      setActivated(false);
68    }
69  }, [hovered, focused]);
70
71  useEffect(() => {
72    if (activated) {
73      controls.start("activated");
74    } else {
75      controls.start("notActivated");
76    }
77  }, [activated, controls]);
78
79  const container = {
80    notActivated: {
81      y: 0
82    },
83    activated: {
84      y: -10,
85      transition: {
86        staggerChildren: 0.07,
87        delayChildren: 0
88      }
89    }
90  };
91
92  const pill = {
93    notActivated: {
94      y: 0
95    },
96    activated: {
97      y: [0, -10, 0],
98      transition: {
99        duration: 0.4
100      }
101    }
102  };
103
104  return (
105    <LazyMotion features={domAnimation}>
106      <AnchorContainer
107        initial="notActivated"
108        animate={controls}
109        variants={container}
110        onMouseEnter={() => setHovered(true)}
111        onMouseLeave={() => setHovered(false)}
112        onFocus={() => setFocused(true)}
113        onBlur={() => setFocused(false)}
114        href={`/blog/${id}`}
115        style={style}
116      >
117        <div
118          style={{
119            height: "100%",
120            padding: "1rem",
121            display: "flex",
122            flexDirection: "column",
123            justifyContent: "flex-start",
124            textAlign: "left",
125            alignContent: "flex-start",
126            gap: "1rem"
127          }}
128        >
129          <div>
130            {title && (
131              <div style={{ fontSize: "1.5rem", lineHeight: "2rem" }}>
132                {title}
133              </div>
134            )}
135            {date && <div style={{ fontStyle: "italic" }}>{date}</div>}
136          </div>
137          {description && <div>{description}</div>}
138          <div
139            style={{
140              display: "flex",
141              flexWrap: "wrap",
142              rowGap: "1rem",
143              columnGap: "0.5rem"
144            }}
145          >
146            {tags.map((tag) => (
147              <Pill key={tag} variants={pill}>
148                <span style={{ color: "rgb(255, 107, 0)" }}>#</span>
149                {tag}
150              </Pill>
151            ))}
152          </div>
153        </div>
154      </AnchorContainer>
155    </LazyMotion>
156  );
157}
158

Let's break this down a little. Framer motion allows us to stagger the animations of a child component with variants. We use staggerChildren: 0.07 on the variant for our AnchorContainer component. This will cause the animation for the Pill component to be staggered such that each pill waits to start it's animation. The animations are very declarative, we just tell Framer Motion what the key states of an animation should be, that we want all children animations of AnchorContainer to be staggered, and it handles the starting, stopping, and reversing for us. We tell Framer Motion when to start animating towards a state, either notActivated or activated, and Framer Motion will handle all of the details about when to animate smoothly forward or backward for us. Even if the mouse or focus on a BlogCard is suddenly changed Framer Motion will just pickup from where it is at and smoothly start transitioning to the next requested state.

The animation states are triggered by the onMouseEnter(), onMouseLeave(), onFocus(), and onBlur() events of the main anchor element. You will notice that we used a separate activated, useState() and an extra useEffect() hook to determine when the animations should start and then reverse themselves. We had to define the activated state because if we tried to do the following...

tsx
01const controls = useAnimation();
02const [hovered, setHovered] = useState(false);
03const [focused, setFocused] = useState(false);
04
05useEffect(() => {
06  if (focused || hovered) {
07    controls.start("activated");
08  } else {
09    controls.start("notActivated");
10  }
11}, [hovered, focused, controls]);
12

...we would have ended up triggering the staggered animation over and over again every time the mouse enters or leaves the card, even when it is already activated with a keyboard selection. It starts to animate wave after wave that overlap and look glitchy. Try it out!

I have also used styled to define the look of the main anchor element and the pill elements. You will notice that the styled anchor element wraps the motion anchor element const AnchorContainer = styled(m.a). This is an awesome feature.

The Missing Prop

Unfortunately this version of the component is less re-usable because we are using m.a ("aka" motion.a) as our main wrapping component. With Typescript this is going to cause us to have a difficult time using the ...rest prop. We have to manually define any props, such as style that we want users to be able to pass through. I usually like to pass {...rest} to the main wrapping HTML element of my components because it means that I can use it somewhere else and attach extra props to it as needed. With Typescript we need to also define a union for our CardProps that include the base elements type to do this. Usually that would look like...

tsx
01type CardProps = {...} &
02React.HTMLAttributes<HTMLAnchorElement>
03
04export function CardProps() {
05  return (
06    <AnchorContainer {...rest}>
07      ...
08    </AnchorContainer>
09  );
10}
11

However that will not work on this version of AnchorContainer because it is an m.a component, not a simple <a\> element. The typings for m.a are...

ForwardRefComponent<HTMLAnchorElement, HTMLMotionProps<"a">>

...Yuck! not to mention the issues you will then get from missing Framer Motion specific props that are then required to be passed in. It is a mess.

The Example Refactored with @emotion/styled

To make this work entirely with @emotion/styled we get to use a couple of cool features. We are going to use the custom props feature to create staggered delays on our Pill animation. We are also going to use the component reference -> ${Component} feature to refer to Pill from within AnchorContainer. I will note that for the codesandbox I had to use a next.js project to get .babelrc and the @emotion babel-plugin plugin working correctly so that I could use the ${Component} feature. Once again, I have also used the style prop for this quick demo instead of pure css or tailwindcss (both of which are preferable).

Check out the pure @emotion/styled version on codesandbox.io

Note: You will probably need to hit refresh on the embedded browser window after the code sand box compiles the app.

/components/BlogCard.tsx
01import styled from "@emotion/styled";
02
03const Pill = styled.div<{ delay: number }>`
04  --color-app-secondary: 49, 130, 206;
05
06  @keyframes hop {
07    50% {
08      transform: translateY(-10px);
09    }
10  }
11
12  display: flex;
13  background-color: rgb(var(--color-app-secondary));
14  gap: 0.1rem;
15  align-items: center;
16  justify-content: center;
17  border-radius: 0.25rem;
18  padding-top: 0.25rem;
19  padding-bottom: 0.25rem;
20  padding-left: 0.5rem;
21  padding-right: 0.5rem;
22
23  transform: translateY(0px);
24  will-change: transform;
25  animation-delay: ${({ delay }) => delay + "s"};
26`;
27
28const AnchorContainer = styled.a`
29  --color-app-primary: 74, 85, 104;
30  --color-app-secondary: 49, 130, 206;
31  --color-text-primary: 227, 227, 227;
32  --color-text-secondary: 255, 107, 0;
33  text-decoration: none;
34  display: block;
35  position: relative;
36  border-radius: 5px;
37  border: 2px solid rgb(var(--color-app-secondary));
38  background-color: rgba(var(--color-app-primary), 0.8);
39  color: rgba(var(--color-text-primary));
40
41  transition-property: background, color, transform;
42  transition-duration: 300ms;
43  transition-timing-function: ease-in-out;
44  will-change: background, color, transform;
45  position: relative;
46  transform: translateY(0px);
47
48  &:hover,
49  &:focus {
50    transform: translateY(-10px);
51  }
52
53  &:hover ${Pill}, &:focus ${Pill} {
54    animation-name: hop;
55    animation-duration: 0.4s;
56    animation-timing-function: ease-in-out;
57  }
58`;
59
60type BlogCardProps = {
61  id: string;
62  date: string;
63  title: string;
64  description: string;
65  tags: string[];
66  className?: string;
67} & React.HTMLAttributes<HTMLAnchorElement>;
68
69export default function BlogCard({
70  id = "refactoring-framer-motion",
71  title = "Refactor Framer Motion For Smaller Bundles",
72  date = "2021-10-10",
73  description = "How to refactor a component from using framer-motion to pure css",
74  tags = [
75    "framer-motion",
76    "refactor",
77    "css",
78    "React",
79    "styled-components",
80    "Typescript"
81  ],
82  className,
83  ...rest
84}: BlogCardProps) {
85  const STAGGER_DELAY = 0.07;
86  return (
87    <AnchorContainer
88      href={`/blog/${id}`}
89      className={`shadow-md ${className}`}
90      {...rest}
91    >
92      <div
93        style={{
94          height: "100%",
95          padding: "1rem",
96          display: "flex",
97          flexDirection: "column",
98          justifyContent: "flex-start",
99          textAlign: "left",
100          alignContent: "flex-start",
101          gap: "1rem"
102        }}
103      >
104        <div>
105          {title && (
106            <div style={{ fontSize: "1.5rem", lineHeight: "2rem" }}>
107              {title}
108            </div>
109          )}
110          {date && <div style={{ fontStyle: "italic" }}>{date}</div>}
111        </div>
112        {description && <div>{description}</div>}
113        <div
114          style={{
115            display: "flex",
116            flexWrap: "wrap",
117            rowGap: "1rem",
118            columnGap: "0.5rem"
119          }}
120        >
121          {tags.map((tag, idx) => (
122            <Pill key={tag} delay={STAGGER_DELAY * idx}>
123              <span style={{ color: "rgb(255, 107, 0)" }}>#</span>
124              {tag}
125            </Pill>
126          ))}
127        </div>
128      </div>
129    </AnchorContainer>
130  );
131}
132

Only a few things have changed on the Pill component. We define a very standard CSS animation using keyframes in which the Pill starts at 0px, translates Y to -10px, and back to 0px. CSS infers the 0% and 100% states so we only need to define the 50%. When we map over the tags prop to create each pill we pass a custom prop, delay: number, to assign a staggered animation-delay to each pill. Lastly, and very important we give it the will-change: transform CSS property so that the GPU handles rendering to create a smooth animation.

Animating the main AnchorContainer on hover and focus is easy, we just use a standard transition: translateY(-10px) on :hover and :focus pseudo-events. The exciting part is that we can assign the hop animation to each Pill component on :hover and :focus of the AnchorContainer using the ${Pill} syntax. ${Pill} is translated into the generated class name for Pill by @emotion/styled. Referencing one styled component from another can be found in the official docs. You will also need to install this @emotion babel-plugin for it to work with SSR (i.e. Next.js). the babel plugin is well worth it for the dead code elimination and minification alone though so I highly recommend it for everyone.

What We Lost

The only issue with animating in this way as compared to using Framer Motion is that if we leave the hover or focus state prior to the animation finishing the pills quickly snap back to their original position rather than smoothly and gracefully reversing the current animation. CSS (as far as I know) has no way to keep track of what frame it is currently on and then smoothly reverse course when the hover or focus state changes.

What We Gained

We have eliminated 23k g-zipped of javascript from this component alone. That may not seem like much, but across a larger application that could really add up. We have also regained the ability to use this component in other parts of our application or even other applications with correct Typescript typings.