Animating widget panels

by Plippie Plop

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="row=fluid">
  
    <div class="span4">
       
        <div class="widget w1">
            <div class="widget-header"><h3> Widget 01</h3></div>
            <div class="widget-content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper dui at magna cursus tincidunt. Vestibulum vel purus at ante gravida feugiat sed in eros. Praesent risus orci, euismod vestibulum vulputate non, malesuada non turpis. Nunc pellentesque leo orci, sit amet tempus est varius eu. Donec nec velit felis. Sed rhoncus venenatis turpis sed commodo. Sed nec dui ut tortor scelerisque aliquet sit amet nec lacus. Quisque mollis massa est. Aenean sit amet malesuada risus. Duis lorem mi, varius id urna vitae, sagittis laoreet tellus. Nulla scelerisque varius ligula, et fermentum est mollis vel. Aliquam interdum gravida velit ac adipiscing.
            </div>
        </div>
    </div>
    
    
    
    <div class="span8 overflow-hidden">
      
        <div class="widget w2">
            <div class="widget-header"><h3> Widget 02</h3></div>
            <div class="widget-content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper dui at magna cursus tincidunt. Vestibulum vel purus at ante gravida feugiat sed in eros. Praesent risus orci, euismod vestibulum vulputate non, malesuada non turpis. Nunc pellentesque leo orci, sit amet tempus est varius eu. Donec nec velit felis. Sed rhoncus venenatis turpis sed commodo. Sed nec dui ut tortor scelerisque aliquet sit amet nec lacus. Quisque mollis massa est. Aenean sit amet malesuada risus. Duis lorem mi, varius id urna vitae, sagittis laoreet tellus. Nulla scelerisque varius ligula, et fermentum est mollis vel. Aliquam interdum gravida velit ac...

CSS

.w2{ -webkit-transform: translate3d(0,0,0); }
.flyout{ -webkit-transform: translate3d(-100%,0,0); }
.w3{ -webkit-transform: translate3d(100%,0,0); }
.flyin{ -webkit-transform: translate3d(0,0,0); }

/***************** 
CSS3 ANIMATIONS 
*****************/
.overflow-hidden{
	overflow-x:hidden;
    border:1px solid red;
}
.overflow-hidden .widget{display:inline-block;position:relative;clear:none;float:left;margin-left:0;margin-right:0;width:100%;}

.animate-ease{
-webkit-backface-visibility:hidden;
-webkit-transition: -webkit-transform 300ms ease-in;
-moz-transition: -moz-transform 300ms ease-in;
transition: transform 300ms ease-in;
}
.animate-linear{
-webkit-backface-visibility:hidden;
-webkit-transition: -webkit-transform 300ms linear;
-moz-transition: -moz-transform 300ms linear;
transition: transform 300ms linear;
}

.in {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 300ms;
-webkit-animation-fill-mode: forwards;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 300ms;
-moz-animation-fill-mode: forwards;
}

.out {
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-out;
-moz-animation-fill-mode: forwards;
-moz-animation-duration: 200;
}

.slide-to-left{-webkit-animation-name: slidetoleft;}
.slide-from-left{-webkit-animation-name: slidefromleft;}

.slide-to-right{-webkit-animation-name: slidetoright;}
.slide-from-right{-webkit-animation-name: slidefromright;}

.slide-from-top{-webkit-animation-name: slidefromtop;}
.slide-to-top{-webkit-animation-name: slidetotop;}

.slide-from-bottom{-webkit-animation-name: slidefrombottom;}
.slide-to-bottom{-webkit-animation-name: slidetobottom;}


@-webkit-keyframes slidefromright {
  from { -webkit-transform: translate3d(100%,0,0); }
  to { -webkit-transform: translate3d(0,0,0); }
}
@-webkit-keyframes slidetoright {
  from { -webkit-transform: translate3d(0,0,0); }
  to {...

JavaScript

var widgetContainer = $(".overflow-hidden");
                        
$('.btn').on('click',function(){
    widgetContainer.find('.widget').addClass('animate-linear');
    if(  widgetContainer.find('.w2').hasClass('flyout')){
    widgetContainer.find('.w2').removeClass('flyout');
    widgetContainer.find('.w3').removeClass('flyin');
       
    } else {
    widgetContainer.find('.w2').addClass('flyout');
    widgetContainer.find('.w3').addClass('flyin');
    }
    
});