- Hook Team
Local Guides are the global community of contributors who share ratings, reviews, and local knowledge of places on Google Maps, helping others in their community. This site educates people on the benefits of joining the program and becoming a Local Guide. Our inspiration stemmed from wanting to show the impact Local Guides have on their communities through illustration.
We used Webflow to create a prototype and give the client a sense of how the site would feel. The prototype had minimal animations in it and we used a separate deck to show motion references which helped visualize how each section would come to life. Between a lot of mood boards and animation references, we gave the clients a clear sense of how the static layouts would come to life.
Each section in the site was meant to be unique and keep the viewer engaged, so we created animations that would draw the viewer seamlessly from section to section. To do this, we decided on using Lottie animations which give our animators better control over the animations and can be easily exported from After Effects.
To maintain the fluidity and resolution of the principal animation, Lottie is used to render the After Effects export as SVG. Greensock and custom code link the animation to the scroll position, with a linear interpolation effect for easing. Greensock also generates timelines for hiding/showing text and secondary animations. Internal tools give our team precise control over delay, duration, and ease, before baking the final values into the code.
The site has gone on to win numerous awards across design blogs and the web. The clients were thrilled with the final result, and we’re honored that so much love has been shown towards it!
Our history of past projects and close relationship with Google has earned the trust and confidence needed to be able to pull off the animations and flow of the UX. When technical limitations arose, we’d regroup internally and discover new solutions which typically would end up being an improvement over the previous idea.