Instead of margin-left, you could try with left property, as your element is already positionned:
.drawer {
z-inder:100000;
position: fixed;
height: 100%;
width:80%;
left: -80%;
background-color: #111111;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
To prevent misunderstanding of jQuery, I'll recommand use CSS class for animation than animate() method (smoother on mobile devices).
Your new CSS class :
.drawer.onScreen {
left: 0;
}
Your new JS :
$('.drawer').addClass('onScreen');
By the way, note that your old JS code use getELementByID when the element you target only has a class.