Content transition effect on site

Navigation
1

I visited this site and liked the way the content moves, when it is clicked on More Articles or Hide List , I'd like to implement a site I'm developing. I'm having difficulty finding the plugin that does this, I inspected the page and saw that already a mixpanel.2.js only that I can not find the documentation for this. Has anyone used this? Is there another way to do this?

    
asked by anonymous 01.07.2014 / 14:24

1 answer

2

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 .

    
01.07.2014 / 15:02
Clear form on entering? Doctrine 2 - Does not recognize class mapped with $ entityManager-getRepository ()