Sweet Animation to Strong Coffee
5 minute read View comments
I have three "creative" loves. I love graphic design, animation and web development. I started off in graphic design so a lot of what I do will be found in this area. That however morphed into web development and though "Flash" into animation and motion graphics. I am relatively comfortable across all of them. But recently interactive animation came to Web UIs, thanks partly to mobile apps.
As Web Animation and UX became a thing, how could I leverage my motion graphics and animation chops?
My web UI animation started with GSAP through an article by Chris Gannon on Codrops, Loader Animation with SVG and GSAP. I got the SimplyGreen GSAP membership on offer and upgraded it later. With that, I built the mobile hamburger and other scroll stuff on my website. Chris even explains how to replace Flash banner animations with an interesting implementation of GSAP. I have found GSAP interesting especially the fact that it was created by Flash gurus and it felt familiar. It remined my of ActionScript.
Catch words: SVG and Animation.
A good friend of mine and fellow designer, Eric Kangiri designed the Chungu Coffee brand identity. It looked happy and it needed some animation love.
I redrew the Chungu Coffee ident in a way it could work for me in animation. I stopped using Adobe Illustrator for Affinity Designer for my graphic design work. For the artwork to work in After Effects, I exported it as an EPS file. PDF also works. I built the animation using shapes and manipulated the paths. For the ripple on the rising level, I used the Wave Warp effect.
I installed the Bodymovin plugin into After Effects, built the animation and exported my animation to HTML and JSON. I tested the animation on Lottie files website as I rubbed my hands in expectation.
There were some GSAP hacks. GSAP had just released the GSDevTools and once you add MorphSVG and DrawSVG into the mix, I suppose it can be done. However, I wanted to work out of After Effects now that animations are part of a brand and are expected to appear across media, such as video bumpers and GIFs on Instagram. Think Samsung or Intel logo animations.
Here is how it turned out - Kahawa Chungu.
This article originally appeared on Codepen.io.
If you liked this article, go ahead, click and fill out the form below and let us begin a conversation about your project.