CSSスライダー：JavaScriptを使用してトリガアニメーション（GreenSock）

Question

私はこのコードについて質問があります。

codepen.io/ettrics/pen/WvoRQo

を、私は内部のコンテンツをアニメーション化しようとしていますスライダをgreensock（tweenmax）でjavascriptを使用します。
どうすれば実現できますか？
ありがとうございました！

Answer 1

あなたはちょうどここにJavaScriptを使用してthisとalso ..

サンプル動画を確認してください。

Htmlの

<div id="overlay"> 
    <a id="close"> close </a> 
    <h1>This is overlay content</h1> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries 
</div> 
<div class="content"> 
    <a id="open"> open </a> 
    <h2>This is page content</h2> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries 
</div> 

のCss

* { 
    margin: 0; 
    padding: 0; 
} 
#overlay { 
    width: 100%; 
    height: 100%; 
    color: #fff; 
    position: fixed; 
    transform: translateY(-100%); 
    background-color: rgba(20,20,20,0.9); 
} 

#open { 
    cursor: pointer; 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    background-color: #ea5; 
} 
#close { 
    cursor: pointer; 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    background: #43e; 
} 

のjQuery

//since there's a -100% translateY in the CSS, this just tells GSAP how things should be assigned between regular "y" and yPercent... 
TweenLite.set(overlay, {y:0, yPercent:-100}); 

$('#open').on('click', 
    function() { 
    TweenMax.to(overlay, 0.8, { 
     yPercent: 0 
    }); 
    }); 

$('#close').on('click', 
    function() { 
    TweenMax.to(overlay, 0.8, { 
     yPercent: -100 
    }); 
    });