Lottie Aanimation
A Lottie is an animation file format based on JSON that is lightweight, scalable and works on any device. You can create the animations in Adobe After Effects and export them as JSON using plugins such as Bodymovin or LottieFiles.
In this case, I wanted to make some authentic and engaging animations from scratch, so I crafted the illustrations myself in Adobe Illustrator, animated and exported them in After Effects. These animations, implemented on a hero section, are lighter than GIFs or MP4 without losing its quality up to any resolution and easily catch user's attention and effectively convey the intended message.
In my opinion, the static illustration alone should be engaging enough for the users and then the animation comes in to enhance its impact and reinforce the message. Keeping this in mind, I made the storyboard of three rotating scenes for the hero section and based on this storyboard, crafted the three illustrations in Adobe Illustrator. I made sure that each scene conveys a clear message and the animated parts are kept simple and on its own, seperate layer to be handled in After Effects.
After completing the vector illustrations, I imported my illustrations into Adobe After Effects, animated them according to my storyboard, and exported them as JSON file using a LottieFiles plug-in (Bodymovin plugin can also be used). The entire process was as enjoyable as a regular animating and also very smooth, and remarkably seamless, thanks to the plugin.
Although it's very clear that this lottie file is much lighter than the other formats for the same animation, I aimed to further reduce its size, especially considering the upload to my personal FTP server, which isn't particularly fast. Consequently, I seperated the background part and the text part from the animation and coded them seperately in the HTML.
The background is SVG which means it's scalable without pixelation and very light. I made them perfectly aligned with the animaed graphics as one scene, using CSS. Additionally, the phrases are coded as a text as ia part of the animated illustration.
The creative process, from crafting mock-ups in Figma to illustrating scenes in Adobe Illustrator and animating them in various ways, is so much fun. But I also found great satisfaction in the publishing phase. Watching all the elements seamlessly align on the layout across different browsers and devices gives me a peculiar sense of fulfillment :-). For achieving responsiveness, Lottie is an ideal way to Incorporate animation into websites. It's light on a mobile and it scales up to any resolution on larger screens. With Lottie, you can enjoy creating animation without worrying about resolution or pixelation.