Google Calendar Deconstructed

Google Calendar Deconstructed

How to create the phone transitions from the Google Calendar landing page?

Let’s explore how Google created this nice animation.

CSS3 Transforms and GreenSock Tweens

Google Calendar Deconstructed

The right 50% of the screen is a container holding all the phone assets.

This container is moved out of the screen on page load and then animated back to the default position defined in the CSS stylesheet.


Explore more details and GreenSock Tweens in the full deconstruction.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.