Kemal Yılmaz front-end developer

A CSS Animations Demo with React & Framer Motion

In this post, I'll try to adapt Framer Motion animation library to a layout without animations by converting standard HTML elements to their "motion.*" counterparts.

Recently, I’ve been assigned a case study for a job interview. The task was to build a type of slider with a lot of complex animations in it.

I haven’t been a fan of case studies, especially when it comes to UI-related work. Most of the time, the people on the other side of the process don’t even read the code you write; they don’t discuss it. Instead, just open the stupid interactive thing and click randomly on some buttons. Then, with a hugely opinionated point of view, they decide if you’re good at your job or not. (Nicely described, I believe. 😄)

However, as you already know, we ultimately had to go with it. So I did the same.

Before going any further, here is the demo page index with shorter explanations to see the end product.

And the code on GitHub.

The problem in this case was about the ‘design and requirements’ I got from the company. A really bad Figma design showed no sense of proportions, unequal margins on the containers, an absolute positioned mindset, a fixed height design for mobile, no webfont usage, … And a video to describe animations that were supposed to be implemented. (No specs on the animations like duration, easing function, motion path descriptions, …)

Frankly, I don’t even complain about setups like these. I think this setup is a really close one to real-world designs that we get from teams like this. But in the process, I’ve been repeatedly told that the company is following a “pixel-perfect” approach. 🤨

Let’s break down my approach to the problem.

Initial Version

See the demo on Github

This is the ‘I need to pass this step of the process’ phase. In two days, I managed to develop whatever was required. I skipped some of the animations, but provided a really basic working example. (And it passed by the way!)

Just to note, I’ve been working more on the business problems part of front-end development and hadn’t touched CSS animations for a while until this case study. So in the initial version, I used plain old CSS animations, absolutely positioned elements, fixed sizes, …

However, React, design, and animations were causing a lot of problems. Here are the questions I wanted to answer in the process:

  1. Can I first build a working layout and functionality without animations, then adapt an animation library?
  2. How can I implement exit/unmount animations with React?
  3. Is it possible to define single animations and make them responsive?
  4. Is it possible to build a fully fluid website with animations?

The purpose of this article is solely to demonstrate that Question 1 is my chosen approach. Because, you can’t just get an animation and expect it to work with any layout. Animations shouldn’t be the primary problem; instead, the layout should.

Short & opinionated answers to the questions above:

  1. Yes, and it’s generally best to follow this approach whenever possible.
  2. See the dedicated article here for more on this topic.
  3. Unfortunately, there is no easy way to do so, especially if you’re willing to support fluid layouts.
  4. Only with super-simple animations, like a fade in/out design.

So, after finishing the ‘Initial Version’, I started working on building a solid layout from the ground up.

Abstract Version

See the demo on Github

The ‘Abstract Version’ is a working, responsive layout that represents the end state of all animations. All the moving parts, background images, and layout elements are represented, and it’s also interactive. The only missing part is the animations.

In this version, I also dropped the real visual assets, replacing them with normalized versions that have consistent aspect ratios. I replaced the text content with dummy text and varied the number of lines to make the design more resilient to different text lengths.

And, at the end, here we have our design ready to be animated. I believe that this approach is much more effective than starting with animations, especially when you have the resources to separate your animation team (or person) from your layout team (or person).

Now, let’s select an animation framework and apply animations to our abstract layout.

Framer Motion

See the demo on Github

The reason I chose Framer Motion for the animations is its <AnimatePresence /> component, which was the easiest one to implement exit/unmount animations.

Other than that, all I did to add animations was to replace standard <div /> elements with their <motion.div> counterparts and write animations for them.

Conclusion