Google Calendar

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.

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.