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.

I started web design with “DHTML”. Remember ActiveX? Later, I became a Flash guy. 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.

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.

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.


75 0 0