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
4864
How was this created?
You can read a detailed breakdown of this animation on CSSTricks.com:
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.
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.
Download Free Toolkit
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.
i’d love a detailed tutorial!
Thanks Dzek, I’ll try to prepare something more detailed or add a video to YouTube. Cheers
Also what would be your main questions Dzek? I want to make sure that the tutorial answers all of them. Thanks
+ 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.)
Thanks Prashant, check out some of my tutorials for complete beginners – first steps with GSAP or starting with GreenSock timelines. And stay tuned for the Google Logo tutorial.
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
Haha, how much detailed is detailed? I hope I’ll get that right:) This Simple GreenSock Tutorial might be a good way to start with GSAP.
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!
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?
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:)
Norman
Thanks Norman, I’ll create the tutorial over the coming days/weeks and thanks again for hanging out with me on Periscope the other day. Cheers
Hi Petr,
we have to thank you, that we’re able to be part of your cool videos!! 🙂
Haha thanks for your support Norman. Hope to see you again on my next scope.
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!
Hi Kristen, thanks for the comment, the tutorial is definitely coming. Stay tuned!
+1 for a detailed tut
Thanks wahid, I’ll do my best to get it out soon.
the dots is the ease.
easeOut > easeInOut > easeIn
good job.
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?
thx!
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.
+1 for a tutorial, would be REALLY great!
Forgot to mention that I’ve published a detailed breakdown of this animation on CSS Tricks.
Recreating the Google Logo Animation with SVG and GreenSock
Hope that answers a lot of your questions.
Cheers
Petr