Create A Google Plus App Tile Animation with CSS3 and jQuery

Create A Google Plus App Tile Animation with CSS3 and jQuery

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

[tut demo=”http://www.onextrapixel.com/examples/google-plus-app-tile-animation/” download=”http://www.onextrapixel.com/examples/google-plus-app-tile-animation/google-plus-app-tile-animation.zip”]

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.

[tut demo=”http://www.onextrapixel.com/examples/google-plus-app-tile-animation/” download=”http://www.onextrapixel.com/examples/google-plus-app-tile-animation/google-plus-app-tile-animation.zip”]

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.

Comments

  1. / Reply

    Thanks!

    • Rana,
    • July 7, 2013
    / Reply

    Nothing appears for me. All I have it the white background. Am I missing something?

  2. / Reply

    Demo not working?

    • Jorell Rutledge,
    • August 29, 2013
    / Reply

    Will this be fixed? Nothing but the background shows.

    • Karthik Guntupalli,
    • January 20, 2014
    / Reply

    This is a great plugin and works good for me, however i have a small scenario.

    I have an aspx page, which hosts a user control, i would like to have this functionality in the user control. I load dynamic divs using jQuery ajax async way. So the control does not wait, either the divs are unavailable by the time $(document.body).on(‘appear’ is invoked, or the body has already been loaded because it is part of an aspx page.

    How do i get around this issue? Please suggest.

Leave a Reply

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

Deals