Create A Google Plus App Tile Animation with CSS3 and jQuery

by in Tutorials on 29th Apr 2013 · Comments

I have always been fascinated by the new Google Plus app on iPhone and Android. Every interaction seems to be very fluid and make sense without sacrificing the performance. The tile animation while scrolling through news feeds makes it even more enjoyable to scroll through content. Wouldn’t it be nice to have such an animation on your website?

Today, I am going to show you how to create a beautiful tile animation like in the Google Plus app using CSS3 and jQuery. (Webkit-Browser Only) You can view the demo below to get a feel of how the effect will look like. Hopefully, you will like it.

Create A Google Plus App Tile Animation with CSS3 and jQuery


Create A Google Plus App Tile Animation with CSS3 and jQuery

Step 1: The HTML

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

You can have as many divs as you want. I’ve added 8 divs so that the page is long enough to make it scrollable so you can see the effect.

Step 2: The jQuery

First we need to include all the necessary jQuery plugins before we can continue.

<body>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="https://raw.github.com/morr/jquery.appear/master/jquery.appear.js"></script>
</body>

In addition to the jQuery core file, we also need another plugin called Appear which will allow us to detect when objects are in the browser’s viewport. Simply include these files right before the body closing tag.

Once that is done, let’s begin writing a jQuery code to dynamically add class names to objects that appear on the view port so we can animate the entrance animation with CSS3.

<script type='text/javascript'>
$(function() {
  $(document.body).on('appear', '.card', function(e, $affected) {
    // add class called “appeared” for each appeared element
    $(this).addClass("appeared");
  });
  $('.card').appear({force_process: true});
});
</script>

Add this snippet right after where we included the jQuery plugins. This snippet will detect when objects are in the browser’s viewport and add a class called “appeared” so that we can use it to animate with CSS3 in the next step.

Step 3: The CSS

body {
    background: #f3f3f3;
}
.card {
    background: white;
    width: 350px;
    height: 300px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    border-radius: 3px 3px;
    margin: 0 auto 10px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
    -webkit-transform:  translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
    -moz-transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
    transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
    opacity: 0;
}

.card.appeared{
    -webkit-transform: translate3d(0px, 0px, 0px) rotateX(0)  scale(1, 1);
    -moz-transform:  translate3d(0px, 0px, 0px) rotateX(0)  scale(1, 1);
    transform: translate3d(0px, 0px, 0px) rotateX(0)  scale(1, 1);
    opacity: 1;
}

Now that all the mechanisms are in place it’s time to style the HTML so that it behaves the same way as you see in the Google Plus app. As you can see in the above styles, I first hide the tiles with an opacity, scaled it and rotated it a little so that when the content appears, it will look like it’s flipped in from the bottom. For the style when the card appears, I reset all transform styles to default and opacity to 1 which will result in the animation like you see on Google Plus app.

Conclusion

Now you have a beautiful effect for when users scroll through your content. I can’t tell you how many times I went back to the Google Plus app just to scroll through the content because of how delightful it is to do it and I believe this can be a great addition to your website.

If you have any questions or suggestions, let me know in the comments below.

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of Bucketlistly.com and MyColorscreen.com. Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.