Google SVG Logo Animation With GreenSock

Google SVG Logo Animation With GreenSock

As you probably know, Google has revealed a new logo last week.

Some people like it, some are criticizing the hell out of it.

But what caught my attention wasn’t the logo itself, it was the creative use of motion design on the page introducing this new logotype.

There has been plenty of attempts to recreate some of these animations on CodePen (here, here or here) and I couldn’t resist and add my animation to the collection.

Here it is.

Google SVG Logo Animation


How was this created?

You can read a detailed breakdown of this animation on

Recreating the Google Logo Animation with SVG and GreenSock

Let me know in the comments if you have found it useful or if you have any other questions.

Google SVG Logo Animation With GreenSock

In a quick summary, I did trace over a png in Illustrator to create the necessary assets, then exported the SVG and used GreenSock TweenMax.js to create this animation.

What do you think?

Do you like the new Google logo and their motion design? Have you tried to recreate some the animations? Share your work in the comments.

Want To Learn GreenSock?

Join me in the GreenSock Workshop and learn how to build 3 interactive projects from start to finish.

Visit GreenSock Tutorials to see the SVG Lab project live.

Download Free Toolkit

All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.

100% Privacy. Guaranteed! Powered by ConvertKit

22 thoughts on “Google SVG Logo Animation With GreenSock

      1. Prashant

        + 1 for a video tutorial. I think you can cover green sock basics well. (For those who haven’t yet made anything on green sock.)

      2. dzek

        to be honest – ive never used greensock but im following your rss, reading new posts and adding stuff to favourites

        so detailed step-by-step (and by “detailed” i really mean it) guide would be useful – it would be a really nice start to begin learning about svg animations

  1. Kamal Sharif

    Cool! I’m a 8 months kid in Front End. Detail tutorial will help me more. Sometimes I think if my skill will ever reach the level as yours!

    1. Petr Tichy Post author

      Hi Kamal, thanks for the comment. We all start somewhere, I am sure you’ll put my CodePens in a pocket in the future. I’ll do a more detailed tutorial. What would be your main questions regarding the Google SVG logo animation above?

  2. Norman Dubois

    Hi Petr,
    i love this demo:)
    A detailed tutorial would be very cool.
    I have no specific question about it, but I’m also excited how you created it in illustrator and exported it.
    I saw the replay of your periscope but a detailed look at it would be great.
    Is the draw svg plugin for free?
    I think that somewhere I read that it is a paid plugin, but I’m not sure…

    Thanks so much Petr!!

    Happy tweening:)


  3. Kristen Ramirez

    The animation was my favorite part of the brand evolution! I’d also love a detailed tutorial. I’m interested in anything you’re willing to divulge, from the storyboard/ideation process, to if you used something else for prototyping, and especially how you used GreenSock to manipulate the shapes. I am also wondering why the tween library was chosen. I haven’t been hands on with either of these libraries, so forgive me if these are total noob questions!

  4. jackdenied

    Hi Petr,

    I’ve tried to recreate it locally – pull the code from codepen – but after that animation doesn’t work 100% as on codepen. What js libraries do I need?

    Is it only TweenMax.min.js ?

    Also the color definitions on scss – $google-blue: #4285F4;
    $google-green: #34A853;
    $google-yellow: #FBBC05;
    $google-red: #EA4335;

    they are not pointing to anywhere, or i am wrong?


    1. Petr Tichy Post author

      Hi Jack, you’ll need jQuery, TweenMax.min.js and DrawSVGPlugin.js. You are probably missing the DrawSVGPlugin, that is a GreenSock membership plugin. The version included in the CodePen will only work when loaded from CodePen domain.

      And yes, you are right the colors are not being used in the demo.


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.