A new KFC.com launched a few weeks ago. The chicken place. I still haven’t made it too far into the site, but the nav icon animation caught my attention. It’s simple, slick, and just snappy enough.
I love how much character this little guy has.
###Let’s strip it down My goal in recreating this thing was to write as little code as possible. Because internet.
The HTML is straight forward. As indicated by the class name, that
js-nav_trigger will be the selector we use to handle click events. Next, we’ll setup our
nav-icon and drop in 3 bars. Typical DRY mentallity would suggest we use a single
bar element, and simply use the pseudo elements
:after for the first and last bars. However, we’re doing some fancy things– each bar will need it’s own pseudo elements, so just trust me.
Still with me? This is where all the magic happens. We’ll go chop thru it, starting at the top.
First thing we do is set up a few variables so we can easily experiment with timing and easing without rewriting everything. Cool. Now we want to position the nav icon container. Notice the
left property is centering that bad boy. You’ll probably want that thing fixed to the left, so keep it classy– give it
On to the bars. We first want to define the base styles for each bar element. They need to be absolutely positioned, full width and have some default transforms. You’ll notice the piece that makes this animation so snappy is the transition setup. Pay close attention here. Because we want to animate things at different times, and to do this, we’ll use the animation delay property wisely. Read the transition styles like:
Those delays are all really important. We need to break the animation into 3 steps.
Remember, we defined
$speed: 200ms;. So the
Resize step should happen right away, lasting 200ms. The
Align step should happen after the
Resize step is complete, so the delay needs to equal to the animation time of step 1:
$speed. And finaly, we can move to the
Rotate step. This needs to wait until both steps are complete, so the delay should be
($speed * 2).
Kinda make sense?
Because we need the ability to animate a few properties at diferent times, and maintain proportions, we’ll use a
:after pseudo element on each bar to represent the visible bar.
Nothing to see here. We are simply attaching a few event handlers to toggle the