Create a Google Tips Card Animation for your Website with jQuery Tip Cards

Google has recently launched a new website called Google Tips that consists of tips on how to use all Google’s products. As usual, I took a look and was blown away by their card effects and animation. Everything seems to work naturally without overkilling it so I decided to create a plugin that will let you add a similar effect to your website without you having to code yourself.

That plugin is called “Tip Cards”. I have also added many customizations to the plugin so that you can personalize your layout accordingly. Let’s dive into those customization options.

Note: This plugin has been tested on Chrome, Firefox, Safari, on desktop. This has not been tested on IE.

Create a Google Tips Card Animation for your Website with jQuery Tip Cards


How to Use Tip Cards.js

How does this work?

As you may notice, there are many moving parts in order to accomplish such animations. First is an entrance animation when the page is loaded. Second is when the user hovers over the animation, the card must tilt a little. Third is when the card is clicked, several cards should fly in from all directions and stack up nicely behind the clicked one. Last but not least, the animation when the user flips through cards with a navigation button.

For the first, second and fourth animation, all I had to do was create an animation class in CSS and use CSS3 transform to make cards fly in and tilt accordingly. For the third animation however, I had to first generate the main modal window that will show the content, and I cloned it into 4 copies and moved all of them out of the viewport in all directions, ready to be animated. Once all that was done, I moved each clone inside the viewport with CSS3 one by one in sequence and stacked them all in the center of the page. Once all clones’ animation have been completed, I then moved the main modal and stacked it on top of everything to create a beautiful pile of cards.

Although, it took me a while to wrap my head around this, I realized it could all be done easily with CSS3. The problem is to execute each animation class in sequence. I decided as a workaround, to use the setTimeout method that prevents any other function from executing until the timer is finished. I set the timer to 100 milliseconds which has little to no effect on what the viewer would see and runs the animation class inside a nested setTimeout method. This allowed me to execute each animation one by one and create a similar effect to the one you see on Google Tips.

How-Tos

First things first, make sure you’ve included the latest jQuery library available here, jQuery.tip_cards.js, and tip_cards.css which can be found here, in to your document’s <head>.

Once that is done, you will have to choose weather you want the card to be flippable (like you see on the Google Tips page) or non-flippable. If you want the exact same experience as the Google Tips page, use the HTML markup below:

2 Sided Flippable HTML Markup

<body>
  ..
  <ul class="tips">
    <li>
      <div class="tc_front">
        <a href="#tip1">...</a>
      </div>
      <div class="tc_back">...</div>
      <div id="tip1" class="tip">
        <div class="tc_front">...</div>
        <div class="tc_back">...</div>
      </div>
    </li>
  ..
</body>

Note: If you would like the card to be flippable, the HTML markup above will work perfectly. The content inside “tc_front” will be the front side of the card and the content inside “tc_back” will be the back side of the card.

If you DO NOT want it to be flippable then take out all the “tc_front” and “tc_back” tags and your card will no longer be flippable. An example of markup is shown below:

Non-flippable HTML Markup

<body>
  ..
  <ul class="tips">
    <li>
      <a href="#tip1">...</a>
      <div id="tip1" class="tip">
        ...
      </div>
    </li>
  ..
</body>

Once your markup is in place, you can call the same function as shown below and the plugin will automatically determine whether you want the card to be flippable or not from your markup.

JS

$(".tips").tip_cards({
    entrance: "bottom",
    column: 4, 
    margin: "1%",
    selector: "> li", 
    hoverTilt: "right",
    triggerSelector: "> li a", 
    cardFlyDirection: "all",
    closeButton: "X", 
    flipButton: "Flip",
    navigation: true,
    beforeOpen: null,
    afterOpen: null 
  });

Once all that is done, you will now have a gallery of cards that will let the users interact in a fun way like you see on the Google Tips page.

Now, let’s dive into all the options you can play with this plugin:

  • entrance: This option lets you determine the direction of the fly-in entrance animation when all the cards appear. Available options are "bottom", "left", "right", and "top". The default value is "bottom".
  • column: I’ve also added the ability to calculate and align the cards automatically. You can define how the cards will be aligned into columns by changing the number here. The default value is 4.
  • margin: You can also define the margins between each of thecards here. Percentage is currently supported at this point. The default is "1%".
  • selector: As with all my plugins, you can change the default structure of the markup by defining your own selector here in case you do not want to use ul and li tags. This option accepts the normal CSS selector. The default value is "> li"
  • hoverTilt: You can define the tilt direction when cards are hovered here. Available options are "right", "left", "up", and "down". The default value is "right".
  • triggerSelector: In this plugin, you will also have to define the trigger that will activate the modal. The default behavior is that it will use the link inside a list as a trigger to activate the card. You can define your own trigger here by putting in a selector for the trigger button.
  • cardFlyDirection: This option will let you determine the direction of the fly-in card animation when the modal appears. Available options are "all", "top", "bottom", "left", and "right". The default value is "all" which will have the cards fly in from all directions and stack up under the opened modal.
  • closeButton: You can define the content of the close button here. Change this to “false” to prevent the plugin from automatically generating the close button. The default string is "X".
  • flipButton: You can define the content of the flip button here. Change this to “false” to prevent the plugin from automatically generating the flip button. The default string is "Flip”.
  • navigation: Set this to true to allow users to navigate from one card to another when the modal is opened. Change this to “false” to disable the ability to navigate. The default value is “true”.
  • beforeOpen: A callback function that will be executed before the modal opens.
  • afterOpen: A callback function that will be executed after the modal opens.

With all these available options you can now tweak the plugin to your own liking by simply supplying options into the function call. I’ve also added callbacks that will let you perform actions while the plugin is currently running. Here are all the available callbacks:

  • beforeOpen(): This callback will be called called before the modal opens after cards are clicked.

    JS

    $(".tips").tip_cards({
      beforeOpen: function () {
        ...
      }
    });
    
  • afterOpen(): This callback will be called called after the modal opens after cards are clicked.

    JS

    $(".tips").tip_cards({
      afterOpen: function () {
        ...
      }
    });
    

Neat isn’t it? You can now add a bunch cool animations like you see on the Google Tips page by just calling a function and the plugin will do all the hard work for you.

Conclusion

I hope you like this tutorial and find the plugin useful. If you have any questions, suggestions, and something to show, feel free to let us know in the comments below.