Client Name: Google
Platform: Website
Time Frame: April 2021 - June 2021
This was an independent project created using GreenSock animations and Illustrator SVG files. Using multiple simple animations, I was able to bring this Fairy Google Doodle to life.
I wanted this google doodle to feel very earthy and magical. A big inspiration for it was the little miniature fairy houses and gardens that people will build and collect. I created a mood board that conveys the same kind of feeling I wanted it to give off. I wanted the user to feel like they are in a magical fairy land, surrounded by greenery, cute little mushrooms, and fairies flying all around. I chose very earthy colors to work with from the mood board. I chose the font Soria because it is almost swirly and gives off the enchanted feeling that I was going for.
I began this project by sketching out different objects that related to the theme. Since this is a google doodle, I wanted some of the letters to be different objects. I also wanted vines and leaves going throughout the whole word, so I tried out a few different ways that I could achieve that.
I continued with creating the different pieces of the doodle in Illustrator. Everything needed to be separate if I wanted different parts to move differently, at different times. I also created the mushroom and little stump house. I got the fairy vector art from here, but I did add the color to it, as well as separating the wings to animate them. The smaller dark green pieces were used to cover the vines to make it appear like they were wrapping around the letters.
I completed the animations using Gsap and Javascript on Codepen. Below you can see all my code as well as the live result.
See the Pen Untitled by Charlotte Murray (@churray4) on CodePen.