Guide the user

Animation can be used to guide the user to the next available action.

We now have a fully functional slide out menu, using CSS animations.

While we’re still working on the sidebar, let’s focus on the hamburger icon.

3.1 Morphing shapes

Animations can be used to direct users to the next available action. How can we inform the use of the next action once the sidebar has been toggled? A popular pattern in animation is to ‘morph’ from one shape to another, to direct the users attention to change on the page and the next available action.

To achieve this, let’s use transforms to modify the hamburger shape. Before we jump into code, let’s think about the trajectory of our shapes

Simply transforming and rotating the top and bottom lines doesn't result in a perfect 'X', as they're not on the correct trajectory.

There are several tricks and techniques that we can use to create a perfect 'X' but for this task, let's:

• Vertically align all three lines in the centre.
• Hide the middle line.
• Rotate the top and bottom line in opposite directions

/** Sidebar hamburger toggle animation  **/
.sidebar.show .sidebar-toggle span.first {
  transform: translateY(7px) rotate(-45deg);
}

.sidebar.show .sidebar-toggle span.second {
  opacity: 0
}

.sidebar.show .sidebar-toggle span.third {
  transform: translateY(-7px) rotate(45deg);
}

Finally, let's add a transition to the toggle to animate between these states:

.sidebar .sidebar-toggle span {
    transition: transform 1s, opacity 1s;
}

We now have an animated hamburger icon. Deadly!