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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.desktop .scroller-inner>section.intro.animated-in>.content.article-left h2 { animation: fade-in-right .75s both cubic-bezier(.215, .61, .355, 1); } @keyframes fade-in-right { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } |
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:
1 2 3 4 5 6 7 8 9 10 11 |
TweenMax.to($('.intro'), 0.8, { left: "100%", ease: Sine.easeInOut, onComplete: this.reset, onCompleteScope: this }); TweenMax.to($('.schedule'), 0.8, { opacity: 1, left: "0%", ease: Sine.easeInOut }); |
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.
1 2 3 4 5 6 7 8 |
<section class="quick-create" data-desktop-src="assets/images/backgrounds/month-view.jpg"> <video data-preload="" preload="metadata"> <source src="assets/videos/quick-create.mp4" type="video/mp4"> <source src="assets/videos/quick-create.webm" type="video/webm"> <source src="assets/videos/quick-create.ogg" type="video/ogg"> </video> <div class="replay-btn shown"></div> </section> |
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.

thank you very much
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!
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.
This is awesome! I hope you’ll pick this series up again, I think it’s super helpful!
Thanks, I’ll try to do my best to start contributing again, just super busy working on a large project atm.
Great read! Thank you, sir!
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!
I just found your guide to JS scrolling animation libraries (https://ihatetomatoes.net/guide-scrolling-animation-libraries/), but it looks like they gutted one of these, right?
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.