Google Calendar

google.com/calendar/about/

If someone like Google uses a plugin on their project, it can only mean one thing…the plugin is great.

That can certainly be said about GreenSock and in today’s deconstruction we’ll look at how Google used it to create this elegant one page presentation.

Quick overview

The site is using number of short GreenSock Tweens and Timelines and cleverly animating them into the view in sync with the text content.

Perfect way to take advantage of scrolling animations and tell the story about a great product.

Now we’ll explore it in more detail.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

1. Text animation

The text in each of the sections is fading in from a slight offset left or right.

The effect is achieved by combining extra CSS classes animate-in, animated-in,fade-in-left,fade-in-right,fade-in-up,fade-in-down andanimate-out.

Here’s a code example:

Once JavaScript adds the .animated-in class to the section.intro the above code fades the element in and moves it from translateX(-20px) position to translateX(0) at the same time.

2. Phone Position

If you are like me than the first animation of the phone that you really noticed is when the screen animates between December and January.

Oh well, let me tell you that the first animation of the phone actually happens before that, without anyone noticing.

The container holding all the phone assets is positioned absolute top: 0, but is moved out of the screen on page load using translateY(814px).

The translateY value is calculated by JavaScript and is updated every time you resize the browser window.

When the user scrolls down this translateY value is animated back to 0, back to the default position defined in the CSS stylesheet.

3. Phone Screen and Dec/Jan Transition

translateY is also heavily used for the phone screen animation between December and January view.

Everything that you see on the screen is created using two images.

calendar-strip.png is a transparent png which does most of the heavy lifting.

.calendar-strip is a 300% tall div, which animates from translateY(0) to translateY(-38%) and .ui-bar` changes the background position to reveal the January label at the end of the animation.

The animation of .illustration completes this slick transition.

It animates from translateY(0) to translateY(-32%) behind the transparent png of .calendar-strip.

Pretty cool huh?

4. January to Primary Transition

The exchange of the screens between January and Primary view happens at the same time, this time animating the left offset.

.intro moves out of the screen to left: 100%, while .schedule moves the opposite way to left: 0.

The GreenSock animation tweens would look like this:

0.8 is the duration and Sine.easeInOut is the easing used for this transition.

5. Schedule Screen

With the introduction of flat design, it become easier to create some slick animations just by smart use of scale, translateY, translateX and opacity.

That’s what’s happening on the .schedule screens.

For example the cursor click or tap on the .calendar-screen is simply animating the opacity, scale, translateX and border-width of a pure div styled by CSS.

Here’s how the exchange of the .schedule screens work.

GreenSock Timeline is played to reveal each screen after the previous animation is completed.

5. Final Screen

The final screen where the user types in on the phone is not animated by GreenSock. This is a video being played in the background.

Conclusion

There you have it, another project by a big brand using Greensock for animations to demonstrate the cool features of Google Calendar.

What do you think about the upcoming trend of one page websites with detailed animations?

Let me know in the comments below.

Until next time, happy deconstructing.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

9 Comments

  1. Rob Levin
    Reply

    Thanks Petr, it’s fun to look at how you broke this down. I don’t know why, but I’d never even seen this gdocs page lol. I’m gonna start checking in on this site to see what you find and deconstruct and get some inspirations!

    • Petr Tichy
      Reply

      Thanks Rob, as I mentioned I am quite busy working a big project. Can’t wait to adding more deconstructions soon. You keep up the great work with your SVG podcast.

  2. wasabigeek
    Reply

    This is awesome! I hope you’ll pick this series up again, I think it’s super helpful!

    • Petr Tichy
      Reply

      Thanks, I’ll try to do my best to start contributing again, just super busy working on a large project atm.

  3. Caio Iglesias
    Reply

    Their minified code is annoying :( Have you covered the JS triggering the animations and snapping the scroll position into place somewhere else?

    I really enjoyed their site and your deconstruction!

      • Petr Tichy

        Hi Caio, I don’t think they’ve used any of the libraries for scrolling, but you could certainly achieve a similar effect using ScrollMagic and GreenSock.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">