Smooth as Butter: Achieving 60 FPS Animations with CSS3
José Rosário
2.6K49

A warning to others, don’t simply copy the ‘code’ as its incorrect.

With a bit of amending, it will work:

[spaces where missing, wrong quotes & hyphens used, no mention of the click button to trigger the menu in the example above]

<style>
 .menu {
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 pointer-events: none;
 z-index: 150;
 }

.menu — visible {
 pointer-events: auto;
 }

.app-menu {
 background-color: #fff;
 color: #fff;
 position: relative;
 max-width: 400px;
 width: 90%;
 height: 100%;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 -webkit-transform: translateX(-103%);
 transform: translateX(-103%);
 display: flex;
 flex-direction: column;
 will-change: transform;
 z-index: 160;
 pointer-events: auto;
 }

.menu — visible .app-menu {
 -webkit-transform: none;
 transform: none;
 }

.menu — animatable .app-menu {
 transition: all 130ms ease-in;
 }

.menu — visible.menu — animatable .app-menu {
 transition: all 330ms ease-out;
 }

.menu:after {
 content: ‘’;
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.4);
 opacity: 0;
 will-change: opacity;
 pointer-events: none;
 transition: opacity 0.3s cubic-bezier(0,0,0.3,1);
 }

.menu.menu — visible:after{
 opacity: 1;
 pointer-events: auto;
 }
</style>

<div class=”menu”>
 <div class=”app-menu”></div>
</div>
<div class=”layout”>
 <div class=”header”>
 <div class=”menu-icon”>menu</div>
</div>
</div>

<script>
 function toggleClassMenu() {
 myMenu.classList.add(“menu — animatable”);
 myMenu.classList.add(“menu — visible”);
 myMenu.addEventListener(“transitionend”, OnTransitionEnd, false);
 }
 function OnTransitionEnd() {
 myMenu.classList.remove(“menu — animatable”);
 }
 var myMenu = document.querySelector(“.menu”);
 var oppMenu = document.querySelector(“.menu-icon”);
 oppMenu.addEventListener(“click”, toggleClassMenu, false);
</script>

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.