Jump to content
GreenSock

Kutomba

How to hide elements in sequence using tweenmax?

Recommended Posts

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

Link to comment
Share on other sites

Hi Shaun.

 

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

Link to comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×