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=”https://onextrapixel.com/examples/google-plus-app-tile-animation/” download=”https://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=”https://onextrapixel.com/examples/google-plus-app-tile-animation/” download=”https://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.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.