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?
As Web Animation and UX became a thing, how could I leverage my motion graphics and animation chops?
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 use 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.
For the the web animation, I installed the Bodymovin plugin into After Effects, built the animation and exported my animation to HTML and JSON.
Alas!
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.
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.
I posted the results on CodePen as a project. Here is how it turned out on - Kahawa Chungu.
