Animation-A-Day: 006

[ Animation-A-Day: 006 ] - Day 6, across the Styx. After realizing I was just in the shallow end of animations, I spent the time this weekend to learn more about what is considered best practice in the industry and what modern tools are at my disposal. The verdict is in, and the news is good. Animations have never been easier to create and, most importantly, implement into a product experience.
Now, my only problem is that I don’t have enough hours in the day to learn all these things. To focus my efforts and use my time efficiently, I will dedicate each week to learning one new animation-related thing. This week, I want it to be all about Loitte Animations and their integration with Webflow. Loittes are super hot right now, and I am super excited to learn more.
First, I needed to understand the basics, so I kept it simple for 006. I wanted to simulate that a ball explodes when the User clicks on it, then it transforms into a number, and when they click again the animation is reversed. Once I created a simple animation in After Effects to simulate my envisioned effect, I leveraged the Bodymovin extension to export my animations as JSON files ready for the web, then I utilized my Webflow site for a demo space to set up the interactive elements and on-click events.
I was surprised by how easy it was to implement a Loitte animation and how fast everything loads in a live environment. I can not wait to continue to learn more and see what I can come up with. Next, I will try out some on-scroll animations, the ideas are already brewing.
Thanks for tuning in, and I hope you have a great day!
Test out the animation on my website: www.cmykris.co...
~~~~~~~~~~~~~~~~~~~
🎵 Music
Fluidscape by Kevin MacLeod is licensed under a Creative Commons Attribution 4.0 license. creativecommon...
Source: incompetech.com...
Artist: incompetech.com/
~~~~~~~~~~~~~~~~~~~
🎉 SFX
Cinematic atmosphere PS 001 by AudioPapkin -- freesound.org/... -- License: Attribution NonCommercial 4.0