Sweet Animation to Strong Coffee picture

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.

When I started web design “DHTML” was the buzz word. Remember ActiveX? (**crickets** laugh) Later, Flash opened the door to After Effects and found I could script simple animations in something that looks and feels like JavaScript called ExtendScript.

As Web Animation and UX became a thing, how could I leverage my motion graphics and animation chops?

I found the answer through a number of web artists. My favorites are Chris Gannon, Rachel Nabors, Sara Soueidan, Sarah Drasner and Val Head. They just happen to be involved in front-end web stuff. And then there are the front-end devs proper, people who hack JavaScript in its full glory, devs who work on React, Vue, Angular, Express with Webpack, NPM and Yarn. I am getting carried away.

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.

Alas!

The coffee should ripple as it fills up. The “Wave Warp” was being applied in the JSON but not translated into JavaScript. I found someone had the same issue on Reddit’s r/AfterEffects. I went through all the links in that post and in the answers. Looking through Bodymovin main resources, I found that certain expressions in After Effects are not yet supported.

Hmm.

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.

I chose to animate by hand. Of course that was best for now, but for a more complex animation, a JavaScript solution would be required. I will keep my eye on Bodymovin as updates are released.

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.

Project Form

Tagged under: animation after effects motion graphics branding web animation

Last updated: Nov. 8, 2018, 3:12 p.m.

blog comments powered by Disqus