Sweet Animation to Strong Coffee
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.
It has been quite a journey. 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. Later I picked up Cinema 4D on my motion graphic journey.
There was a project that I worked on the UI and Front-end web development. After some frustration with a back-end developer, I decided to go into back-end development. That is when I met Django. I was hooked. I had experienced some Python when Py4D was released in 2009, Python became a way to script Cinema 4D and build plugins. Obviously, I found the developer, Sebastian Rath an interesting guy to follow.
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.
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.
My problem is that I needed to animate an SVG path with a Sine wave with one end is pinned. The waves then die at the end of the animation. I searched around and got to motionscript.com. Once I got a hang how sine waves can be done in After Effects, the next question was to animate points on an SVG path to simulate a wave.
Whatever way I do it, I need to start with JavaScript. I found that the implementation would be no walk in the park. I would need to isolate the SVG line I want and code the 2 second animation. Oh, not now, not today.
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 to save time. I will keep my eye on Bodymovin as updates are released.
Here is how it turned out — Kahawa Chungu.
Reprinted from @afrowave’s post on Codepen.
