I have three loves, graphic design, motion design and web development. I am relatively comfortable across all of them. I love interactive animation for the Web, three times over.
As Web Animation and UX became a thing, how could I leverage my motion graphics and animation chops?
I started with GSAP in my web UI animation 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. ActionScript perhaps?
Catch words here: 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.