Create Animated Menu for Mobile fallback

Recently I read a very interesting article about some css animations. One of my favorites was the one with the menu that looks like a fallback for mobile devices. So I thought to replicate the effect (with some twist) with greensock TimelineMax (you can also use TimelineLite).

Here is what the end effect will look:

See the Pen Menu Animation by Michael Dobekidis (@netgfx) on CodePen.

The article for CSS animations can be found here:

http://www.webdesignerdepot.com/2014/04/3-stunning-css-animation-effects-that-will-captivate-your-users/

So let’s see how can we achieve an effect like that

MARKUP-HTML


<div class="screen">
        <div class="menu-btn"></div>
        <div class="menu-bar">
            <div class="menu feed">
                <img src="http://i.imgur.com/DBruDkk.png" />
            </div>
            <div class="menu radio">
                <img src="http://i.imgur.com/pIErM3w.png" />
            </div>
            <div class="menu browse">
                <img src="http://i.imgur.com/9PQemDg.png" />
            </div>
            <div class="menu profile">
                <img src="http://i.imgur.com/Tgp84Mm.png" />
            </div>
        </div>
    </div>

So here we declared our html structure as you can see there is one class for each of the menu elements with a different image inside.
*Note that all have the menu class which is very useful later on.

STYLE MATTERS

Here with css we apply all kinds of style options to help out our animation and not leave everything to javascript and thus our CPU.


.screen {
    background:#000;
    width:150px;
    height:320px;
    overflow:hidden;
    position:relative;
    margin: 24px auto;
    margin:0 auto;
    top: 10px;
}

.menu {
  height:60px;
  padding:0px;
  margin:0px;
  left:-5px;
  position:relative;
}

.menu img {
    height:60px;
    padding:0px;
    margin:0px;
    width:auto;
    opacity:0;
    position:relative;
    left:-18px;
}
.menu.open img {
    opacity:1;
    left:0px;
}
.menu-bar {
    position:absolute;
    left:0px;
    top:0px;
    width:50px;
    height:320px;
    overflow:hidden;
    -webkit-transition: all .6s ease;
    opacity:1;
    
}
/* toggles outlines to slide in */
.menu-bar.active {
    opacity:1;
    left:0px;
    background:#000;
    pointer-events:auto;
}
.menu-bar.active .menu {
    -webkit-transition: all .4s ease;
    padding:0px;
    outline:0px;
}
.menu.feed {
    border-left:4px solid #e02726;
}
.menu.radio {
    border-left:4px solid #58bce2;
}
.menu.browse {
    margin-top:64px;
    border-left:4px solid #efe700;
}
.menu.profile {
    border-left:4px solid #ff91fe;
}
.menu-btn {
    position:absolute;
    top:0px;
    left:0px;
    width:50px;
    height:50px;
    background:url('http://i.imgur.com/MyRm6gv.png');
    z-index:10;
}


So here we declare the positions of the elements, their visibility, and to some their behavior to changes like -webkit-transition: all .4s ease; which means that all changes that are happening to this element(s) will be applied with an animation of 0.4 seconds and some easing.

And now the juicy part of javascript


var tl;
$(document).ready(function() {
  //create a TimelineLite instance
  tl = new TimelineLite({
    'paused':true,
    align: 'sequence',
    'smoothChildTiming':true
  });
  
  tl.add(TweenMax.to(".menu-btn",0.2,{"autoAlpha":0}));
  
  // colors
  tl.add(TweenMax.to(".feed",0.2,{"left":0, "opacity":1, ease:Back.easeOut}) );
  tl.add(TweenMax.to(".radio",0.2,{ "left":0, "opacity":1, ease:Back.easeOut}) );
  tl.add(TweenMax.to(".browse",0.2,{"left":0, "opacity":1, ease:Back.easeOut}) );
  tl.add(TweenMax.to(".profile",0.2,{"left":0, "opacity":1, ease:Back.easeOut}) );
  
  // images
  tl.add(TweenMax.to(".feed img",0.2,{"left":0, "opacity":1, ease:Back.easeOut}) );
  tl.add(TweenMax.to(".radio img",0.2,{"left":0, "opacity":1, ease:Back.easeOut}) );
  tl.add(TweenMax.to(".browse img",0.3,{"left":0, "opacity":1, ease:Back.easeOut}) );
  tl.add(TweenMax.to(".profile img",0.3,{"left":0, "opacity":1, ease:Back.easeOut}) );
  
  $(".menu-btn").on("click", showMenu);
  $(".radio").on("click", reverse);
  $(".menu>img").on("click", reverse);
  
});

function showMenu(e) {
  tl.play();
  
}

function reverse(e) {
  tl.reverse();
}

What we are doing here is to declare a timeline lite instance (greensock GSAP lib) and then create an animation for each colored ribbon and then queue up the icons. When this runs it will display the ribbons one by one and then show the icons.

Clicking one of the icons will close the menu and apply the reverse function to simply return to the previous state without declaring anything else (thats the beauty of GSAP).

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin
Tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *