Animating with CSS Translations
If you are viewing this on a phone (2023 edit: on the old site), you'll notice a three-line "hamburger" icon in the top left corner of this website. If you tap it, there is a slide-in menu for navigating different posts. Back in the day, I used jQuery.animate, which is super easy to use.
// Show menu
$('.menu').animate({
left: 0
});
// Hide menu
$('.menu').animate({
left: -270
});
On phones, the transition was a little janky but not awful. Then I heard CSS transitions were the rage, so I converted it to use CSS transitions, thinking it would take advantage of cool-sounding technology like "GPU-acceleration."
// CSS code
.menu {
transition: left 0.2s linear;
}
.menu {
left: -270px;
}
.menu.showing {
left: 0;
}
// jQuery code to show and hide menu
$('.menu').toggleClass('showing');
I still saw some choppiness but I figured it was just a limitation. Then I found this aritcle on the Treehouse team blog, which shows how much more performant it is to use a translation. Here is my new code, which runs a much smoother animation. (Of course, you'll need your browser prefixes)
// CSS code
.menu {
transition: transform 0.2s linear;
}
.menu {
transform: translateX(-270px);
}
.menu.showing {
transform: translateX(0);
}
// jQuery code to show and hide menu
$('.menu').toggleClass('showing');
I looked into the issue more after being impressed, and as expected this news is everywhere. Here are some good, more in-depth reads.