CSS Slider: триггер анимации с JavaScript (GreenSock)

Question

У меня есть вопрос об этом коде:

codepen.io/ettrics/pen/WvoRQo

Я пытаюсь анимировать содержимое внутри слайдер с грейдером (tweenmax) с использованием javascript.
Как я могу это достичь?
Спасибо за ваши усилия!

Answer 1

Вы просто проверить this и also ..

Пример анимации с JavaScript здесь.

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 
    }); 
    });