How to hide elements in sequence using tweenmax?

[Kutomba 0 Likes (Newbie)]

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?
 

See the Pen qwrwKY by makumba (@makumba) on CodePen

[Shaun Gorneau 1,503 Likes (Superhero)]

Hi @Kutomba,

 

I think you should take a look at staggerTo()

 

See the Pen Nmpmmx by sgorneau (@sgorneau) on CodePen

[Kutomba 0 Likes (Newbie)]

Hi Shaun.

 

thanks for the help, I would like also to know how can I make them appear in sequence?

[PointC 8,599 Likes (Superhero)]

You can use staggerFrom(). I just used autoAlpha, but obviously you can have them come from any position as well.

 

See the Pen jRBgNj by PointC (@PointC) on CodePen

 

Happy tweening.