You can do this by using the greensock library. Very good for animation in js.
It is used this way:
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="cont1">
<a href="#" id="back">BACK</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis voluptate molestiae velit eius ullam recusandae aspernatur quae perspiciatis beatae facilis consequuntur soluta! Ipsam omnis impedit porro numquam neque aperiam atque.</p></div>
<div class="cont2">
<a href="#" id="more">MORE</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam animi officia consequatur quidem consequuntur? Hic similique veritatis porro. Cum quibusdam recusandae fuga beatae saepe deleniti iure sequi eveniet numquam veniam.</p></div>
</body>
</html>
CSS
.cont1{
background-color: #ccc;
padding: 10px;
width: 300px;
}
.cont2{
top: 0;
width: 100%;
background-color: #fff;
position: absolute;
height: 100%;
padding: 30px;
}
Javascript with Greensock
$("#more").click(function(){
TweenMax.to($(".cont2"), 1, {left: 300});
});
$("#back").click(function(){
TweenMax.to($(".cont2"), 1, {left: 0});
});
I made this little example for you to see how it works. You can see the example here .