Create Animated Android Dock Using jQuery & CSS3

Android mobile has a fancy dock when you open the home screen. The dock is animated and pops out the icon when the arrow is selected. We will be creating same animated affect using CSS3 and jQuery.

When user clicks the arrow, the bar rotates upward and creates 3D effect, icon pops out that are hidden behind the dock itself. In all action when bar rotates upward and icon pops out, it looks like doc pushes the icon up which is cool

Animated Android doc CSS Jquery

When user press the arrow again, the doc rotates downward in same fashion and pulls the icon back to the bar. This animation hides the icon behind the bar and moves the arrow to its previous position.

Android animated doc effect in CSS and Javascript

The Markup & Styling

The dock and the icon wrapped by a div called dock-wrapper, it will take on the 3D perspective and the dock position. The dock will consist two div called dock-front and dock-top, both of them will act like a cube. The last element is a single div called item, it will wrap all icon that will pop out later. The icons used in this tutorial are from Google Play.

    <div id="dock-wrapper">  
      <div class="dock">  
        <div class="dock-front">  
           <img src="" alt="Arrow Up" id="arrow-up">  
        </div>  
        <div class="dock-top">  
          <img src="" alt="Arrow Down" id="arrow-down">  
        </div>  
      </div>  
      <div class="item">  
          <span><img src="" width="60"></span>  
          <span><img src="" width="60"></span>  
          <!-- to n icon  -->  
      </div>  
    </div>  

First to go is styling the dock, we will set the perspective on the dock-wrapper and set the position to the bottom of the page. Set dock-front and dock-top transformation and the background. We’ll also add a little animation when user hovering the arrow. Last, we prepare class called .dock-show that will be injected to .dock using JavaScript to force the animation on it.

    #dock-wrapper {  
      bottombottom: 0;  
      width: 100%;  
      height: 60px;  
      position: fixed;  
      perspective: 3000px;  
    }  
        
      .dock {  
        height: 70px;  
        transform-style: preserve-3d;  
        transition: transform 1s;  
      }  
        
      .dock-show {  
        transform: translateZ(-25px) rotateX(-95deg);  
      }  
        
      .dock-front, .dock-top {  
         position: absolute;  
         display: block;  
         width: 100%;  
         height: 40px;  
         padding: 10px 0;  
         box-shadow: 0px -3px 6px rgba(0,0,0,0.3);  
      }  
        
      .dock-front {  
         background-image: linear-gradient(to bottombottom, #434345, #161616);  
         transform: translateZ(30px);  
      }  
        
      .dock-top {  
          background-image: linear-gradient(to bottombottom, #505052, #161616);  
         transform: rotateX(90deg) translateZ(29px);  
      }  
          
      #arrow-up, #arrow-down {  
        cursor: pointer;  
        transition: all .2s;  
      }  
          
        #arrow-up:hover {  
            margin-top: -.2em;  
        }  
          
        #arrow-down:hover {  
            margin-top: .2em;  
        }  

After styling dock done, now we’ll stying the icon. The icon will hidden behind the dock and each icon will have absolute position to make us ease moving them when pop out by playing its top position.

    .item {  
      position: absolute;  
      width: 526px;  
      left: 50%;  
      margin-left: -263px;  
    }     
         
      .item span {  
        position: absolute;  
        z-index: -1;  
        cursor: pointer;  
      }  
          
      .item span:first-child  { left: 0; }  
      .item span:nth-child(2) { left: 90px; }  
      .item span:nth-child(3) { left: 180px; }  
      .item span:nth-child(4) { left: 270px; }  
      .item span:nth-child(5) { left: 360px; }  
      .item span:nth-child(6) { left: 450px; }  

Final result of our dock :

Demo of animated android dock

When user click the arrow we will inject .dock-show class name to .dock to make the animation working. After injecting we will moving each icon position to top above the dock, making it visible to the user.

    item         = $('.item img');  
    itemReverse  = item.get().reverse();     
    $('#arrow-up').on('click', function() {     
      $('.dock').addClass('dock-show');    
      $.each(item, function() {   
        var i  = $(this).index();  
        var delay = i * 100;  
        window.setTimeout(function (index) {  
          return function () {  
            item.eq(index).stop().animate({ 'top' : '-7.8em' });  
          };  
        } (i), delay);  
      });  
    });  

When user click the arrow once more after the icon appear, we will hide the icon along with rotating the dock.

    $('#arrow-down').on('click', function() {  
      $('.dock').removeClass('dock-show');  
      $.each(itemReverse, function() {    
        var i  = $(this).index();  
        var delay = i * 100;  
        window.setTimeout(function (index) {  
          return function () {  
            $(itemReverse).eq(index).stop().animate({ 'top' : '0' });  
          };  
        } (i), delay);  
      });  
    });  

Last step add animation for the icon when user hover it, playing its top position.

    $('.item img').hover(function() {  
      $(this).stop().animate({ 'top' : '-8.4em' }, 'fast');  
    }, function() {  
      $(this).stop().animate({ 'top' : '-7.8em' }, 'fast');  
    });  
Scroll to Top