Moving along the way of the front-end development path, I’ve always been fascinated by the possibilities of making delightful animation. Luckily, we have so many sources of inspiration for that. My go-to for practical examples is Codepen. Every pen there seems so easy to pick up and try it yourself. However, numerous times, it was contrary for me. The actual implementation was about the pitfalls of getting the result to look the same as an original from Codepen. Recently, I’ve found a solution that might help folks like me trying to recreate Codepen examples. Even more, this method might help you with any animation out there.

Here’s a quite popular example of mobile navigation. I would like us to focus on the burger icon there.

When I decided to recreate this animation, I used the same approach that works for me every time learning something new. This method covers three steps:

1. Break down into chunks. Look overall at a unit and define the main building blocks of the structure.
2. Examine each chunk in detail. Go deep into each part to learn its specifics and how it works. It may take several levels of immersion before getting to the elementary particles of the subject.
3. Assemble everything back. Now, it’s a path from the bottom to the top putting all the particles back together already knowing the hows-and-whys.

The process might remind how kids are playing with toys. Actually, it would be a perfect comparison. I believe that the profound methodology of acquiring new knowledge that works in childhood applies to any age.

Now let’s have a look at how this applies to the burger icon animation step-by-step.

Breaking down into chunks

The most distinct pieces are frames of the start and the end of the movement.

In the case of a burger icon, starting frame is a shape before the user interacts with an icon. It’s a stack of lines, basically. Let’s name this first frame A.

The final frame is the one after the user’s interaction. In our example, it’s a cross sign. Let’s name it B.

Knowing A and B, it’s time to see what’s between these two points that make the transformation work. Imagine the notepad with an image on each page. Each page contains a picture with a slight difference. It turns into motion when we start flipping the pages. It’s the core principle that works in classical animation and interfaces as well. Thanks to technological advancement, there is no need to "draw" every step, just key ones. However, the rest of them is good to keep in mind.

Now we are about to do the same digitally using CSS and the famous burger icon. Since this example is as simple as possible, there is only one in-between frame. Being consistent, let’s name it C.

This transitive state shares feature of A and B at the same time. From A — two parallels, from B — a center of future intersection (similar to the gestalt principle of common fate).

Without C, animation might look like this:

It looks and feels instant. However, such in-between states as C serve a big deal making animation more alive, natural, and a part of the larger choreography. For example, animating A to C and C to B, there is a time slot for the menu's content to appear below. The entire process makes a better cognitive connection between the trigger and the consequence. Where the burger icon is the first and the menu's content is the latter. It is my main takeaway from the transitional frames here. They create complexity to enrich the experience and connect the motion of the entire interface into one entity.

Examine particles in detail

Having a better understanding of the mechanics, now let’s see the technicalities of the code.

HTML setup:

<button>
  <span></span>
  <span></span>
</button>

CSS setup:

button {
  background-color: #edf4ff;
  border: 1px solid #3885ff;
  border-radius: 3px;
  cursor: pointer; 
  display: flex; 
  flex-directon: column; 
  height: 24px; 
  justify-content: space-around; 
  padding: 3px; 
 tranfsorm: rotate(0deg); 
  transition: all 0.3s ease-in-out; 
  width: 24px; 
}span { 
  background-color: #3885ff; 
  height: 1px; 
transform: rotate(0deg); 
transition: all 0.2s ease-in-out; 
  transition-delay: 0.2s; 
  width: 100%; 
}

From an animation perspective, the most interesting part is marked bold in the code snippet above. Button's part will be A1.

tranfsorm: rotate(0deg); 
transition: all 0.3s ease-in-out;

And span's portion — A2.

transform: rotate(0deg); 
transition: all 0.2s ease-in-out; 
transition-delay: 0.2s;

It sets a base for a motion that is going to happen on the way to the next frame.

A1 → C

button { 
  transform: rotate(90deg); 
}

A2 → B

span { 
  transform: rotate(45deg); 
}

When I went through this process for the first time, the complex and barely understandable animation at the beginning turned into clear and comprehensive in the end. Hope it will do the same for others. Now time to combine everything and put it back into motion. Also, it’s a perfect time to experiment with timing, delays, easing, etc. Depending on the result one wants to achieve, those settings may impact the look&feel of the animation like a flavoring for a dish.

Since the basics are already covered above, it’s good to experiment a bit. What if we add a bit of complexity to our example, for example, three lines instead of two. Here’s an updated set of frames with a new addition — D.

A → C is still about 90º rotation.

C → D now about getting two lines instead of three.

D → B is a familiar 45º rotation for each remaining line.

An interesting thing about the C → D transition, there are various ways to achieve it. It might be a translate option — moving one line to take a place of the other and reduce opacity while moving. Another option is to shrink the third line and make it disappear. I hope you get the point of a single destination but various ways to get there. So it is up to you to choose how to execute the motion from C to D.

Here’s how the set of frames looks like when the A has changed a bit again. For instance, those three lines are of a different length.

A → C is still 90º rotation.

C → D is about making two lines of three (I chose translate here).

D → E is a new one and it’s about making lines of the same size.

E → B is the same 45º rotation for each line.

Assemble everything back

The final version is available on Codepen. It contains a full code needed to recreate the burger icon and its animation from the images in the article. You are welcome to play around to see how everything works.

Going through the basic example and more complex is a perfect practice to see how smaller pieces play a key role in creating fascinating animation. From my experience, I’d recommend everyone who is struggling with intricate concepts decompose those things into smaller units. Something that was unknown starts to be seen as clear as a day.