I have a simple block which contains four buttons I want these buttons to disappear
in sequence using tweenmax.
Here is html
<div id="video-content_btns">
<div id="video-content_home" class="video-btn video-btn_content">
<img style="width:41px; height: 40px; cursor: pointer;"src="images/domek.png" />
</div>
<div id="video-content_list" class="video-btn video-btn_content">
<img src="images/lista.png" />
</div>
<div id="video-content_left" class="video-btn video-btn_content">
<img src="images/lewo.png" />
</div>
<div id="video-container_right" class="video-btn video-btn_content">
<img src="images/prawo.png" />
</div>
</div>
<div class="open">open</div>
Here is js
document.getElementByClassName(".open").addEventListener("click", showMainMenu);
var showMainMenu =function(){
var i = 0;
var step = 0.05;
TweenMax.to(".video-btn_content", 1, {
delay: i * step,
opacity: 0,
scale: 0.0,
ease: Back.easeIn,
onComplete: function () {
var j = 0;
$(".video-btn_content").each(function () {
TweenMax.to(this, 3, {
delay: j * step,
opacity: 1,
scale: 1,
});
j++;
});
}
});
i++;
}
This hide all at once, what do I need to change to get what I want?
