Image Gallery with TweenMax CSS3 effects and JQuery sauce

Recently Greensock added some new cool features to their animation JS Engine, these target specifically css3 animations and animating css3 properties.

So I thought to create a little demo showcasing some of these cool new features.

This Image gallery moves on 2 axis, horizontally for viewing different images and “vertically” or “in-time” if you prefer for viewing different galleries.

You can view a rough DEMO here

delorian

So lets start by defining our HTML elements:

<div class="timelineBox selectedTimeline gradeNow" id="cars2012" rel="2012">
               
                <label class="timelineLabel">CARS 2012</label>
                <div class="timelineBoxContainer">
                    <div class="box"><img src="assets/car2012_1.jpg"/></div>
                    <div class="box"><img src="assets/car2012_2.jpg"/></div>
                    <div class="box"><img src="assets/car2012_3.jpg"/></div>
                    <div class="box"><img src="assets/car2012_4.jpg"/></div>
                </div>
            </div>
           
            <div class="timelineBox" id="cars2000" rel="2000">
                <label class="timelineLabel">CARS 2000</label>
                <div class="timelineBoxContainer">
                    <div class="box"><img src="assets/car2000_1.jpg"/></div>
                    <div class="box"><img src="assets/car2000_2.jpg"/></div>
                    <div class="box"><img src="assets/car2000_3.jpg"/></div>
                    <div class="box"><img src="assets/car2000_4.jpg"/></div>
                </div>
            </div>
           
            <div class="timelineBox" id="cars1988" rel="1988">
                <label class="timelineLabel">CARS 1988</label>
                <div class="timelineBoxContainer">
                    <div class="box"><img src="assets/car1988_1.jpg"/></div>
                    <div class="box"><img src="assets/car1988_2.jpg"/></div>
                    <div class="box"><img src="assets/car1988_3.jpg"/></div>
                    <div class="box"><img src="assets/car1988_4.jpg"/></div>
                </div>
            </div>

These three div’s will be animated so that they look one older than the other with the “gradeNow” class div being focused whilst the others are off-focus.

Of course we need some css to make them adjust to place:

#cars2012 > .timelineBoxContainer {
    float: left;
    position: relative;
    height: 250px;
    left: 50%;
    margin-left: -416px;
}

#cars2012>.timelineLabel{
    position:absolute;
    top:5px;
    right:20px;
    font-family:sans-serif;
    font-size:54px;
    color:#F1F1F1;
}

#cars2012 > .timelineBoxContainer > .box {
    background-color: #F1F1F1;
    width: 108px;
    height: 108px;
    margin-right: 150px;
    float: left;
    position: relative;
    top: 108px;
}

Posting here only the cars2012 css code as it repeats for the other two categories.

And we move to the JS part for the “in-time” animation and effect by defining a function called “move to past”:

function moveToPast(grade,elem,delay){
   
    if(delay==null||delay==undefined){
        delay = 0;
    }
   
    var carelem = elem;
   
    // 1 is older
    if(grade==1){
        carelem.removeClass();
        TweenMax.to(carelem,0.2,{css:{top:80,scaleX:0.25,scaleY:0.25,perspective:600}});
       
        TweenMax.to(carelem.children(".timelineBoxContainer").children(".box"),0.2,{css:{boxShadow: "0px 0px 24px 6px white",backgroundColor:"white",color:"#999"},onComplete:function(){
           
            carelem.children(".timelineBoxContainer").children(".box").children("img").removeClass().addClass('focusoutmore');
            carelem.addClass('grade1');
           
            TweenMax.to(carelem,0.8,{css:{autoAlpha:1}});
           
           
        }});
           
        TweenMax.to(carelem.children(".timelineLabel"),0.2,{css:{textShadow:"0px 0px 25px white",color:'none'}});
       
       
    }
    else{
        carelem.removeClass();
       
        TweenMax.to(carelem,0.2,{css:{top:120,scaleX:0.5,scaleY:0.5,perspective:600},delay:delay});
   
        TweenMax.to(carelem.children(".timelineBoxContainer").children(".box"),0.2,{css:{boxShadow: "0px 0px 24px 6px white",backgroundColor:"white",color:"#999"},onComplete:function(){
           
            carelem.children(".timelineBoxContainer").children(".box").children("img").removeClass().addClass('focusout');
            carelem.addClass('grade2');
           
        },delay:delay});
       
        TweenMax.to(carelem.children(".timelineLabel"),0.2,{css:{textShadow:"0px 0px 15px white",color:'none'},delay:delay});
       
    }
}

What we do here is that we scale down and displace the other two categories so that they have a depth effect, we also apply some bluring with the following css code:

*Note: This CSS is only supported by latest chrome so far, so results may vary from browser to browser*

.focusout{
   
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);

}

.focusoutmore{
   
    filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);

}

Now we need to create the animation and functionality that will move from one category to the other, so we setup an event listener:

$("#forwardBtn").live('click',function(event){
       
        var thisObj = $(".selectedTimeline");
        TweenMax.to($(".selectedTimeline"),1.2,{css:{scaleX:10,scaleY:10,autoAlpha:0,top:-20},onComplete:function(){
           
            $(".selectedTimeline").removeClass('selectedTimeline');
           
            moveToPast(1,$(".gradeNow"),0.2);
            moveToPast(2,$(".grade1"),0.2);
            moveToNow($(".grade2"));
           
           
        }});
       
    });

The initial part will scale and fade-out the focused category and swap places between the categories, for example if we had 2012 selected, now 2000 will become selected, 2012 will be last and 1988 will be second in line. The moveToNow function is the following:

function moveToNow(elem){
   
    currentSetLast = 4;
    currentSet = elem.attr('rel');
    if(currentSet == '2000'){
        currentSetMax = 4;
    }
    else if(currentSet=='1988'){
        currentSetMax = 4;
    }
    else{
        currentSetMax = 11;
    }
   
    var carelem = elem;
    var boxes = carelem.children(".timelineBoxContainer").children(".box");
    var imgs  = boxes.children('img');
    carelem.removeClass().addClass('gradeNow');
   
   
    imgs.removeClass('focusout').removeClass("focusoutmore");
    var boxes = carelem.children(".timelineBoxContainer").children(".box");
    TweenMax.to(carelem, 0.6, {css:{scaleX:1,scaleY:1,top:200}});
    TweenMax.to(carelem.children('.timelineLabel'),0.3,{css:{textShadow:'0px 0px 0px black',color:'#f1f1f1'}});
    TweenMax.to(carelem.children(".timelineBoxContainer").children(".box"), 0.5, {css:{boxShadow: "0px 0px 10px 6px #131313"}});
   
    carelem.addClass('selectedTimeline');
}

What this does is to clean up the category div of any classes and give it new ones and also clean up the blur effects and make it look sharp

This completes our “in-time” rotation, but we also need to show more than just 4 images per category, TweenMax offers a cool way to show more images (this technique could be greatly improved if we use preloadJS or any preloading script for our images, but this is a rough demo to showcase some possibilities)

For the in-house category rotation we will setup a new event listener:

$("#rotateBtn").live('click',function(){
        rotateElem(100,$(".gradeNow").children(".timelineBoxContainer"));
    });

And the corresponding function along with some “global” variables:

var currentSetMax = 11;
var currentSetLast = 4;
var currentSet = '2012';

function rotateElem(amount,elem){
   
    var str = '50% 50%';
    console.log(str);
    TweenMax.to(elem.children('.box'), 3, {css:{rotationY:'+=180', transformOrigin:str,transformPerspective:800},onComplete:function(){
   
        var parent = elem.children('.box').children("img");
        TweenMax.to(parent,0.5,{css:{autoAlpha:1}});   
    }});
   
   
    $(".gradeNow").children('.timelineBoxContainer').children('.box').each(function(){
           
           
            TweenMax.to($(this).children("img"),0.9,{css:{autoAlpha:0},onCompleteParams:[$(this)],onComplete:function(elem){
               
               
                console.log(elem,this,$(this));
                if(currentSetMax<=currentSetLast){
                    currentSetLast = 0;
                    elem.children("img").attr('src','assets/car'+currentSet+'_'+String(currentSetLast+1)+'.jpg');
               
                    currentSetLast += 1;
                }
                else{
                    elem.children("img").attr('src','assets/car'+currentSet+'_'+String(currentSetLast+1)+'.jpg');
               
                    currentSetLast += 1;
                }
           
            }});   
        });
}

What we do here is to rotate each of the boxes, fadeout the images inside, load new images when the rotation ends and fadein the new images, when we are out of pictures we load from the beginning again

I really like the potential in this type of gallery so I will keep tweaking with it and post any new findings.

Meanwhile here is a DEMO and the complete code that was mentioned in this post.

*Note: The animation speed and performance may be different between browsers, and only “modern” browsers support most of the features that we used*

Tagged , , , , , . Bookmark the permalink.

Leave a Reply

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