You need Lottie Animations on your website
This week I got distracted by a random Tweet upon my return from holiday and it has taken me down a path of exploration, learning and the further development of the Fourth Wall site.
This post is all about my discovery of Lottie Files and how I have implemented them into my site to create interactive animations which add a little flair and please my inner child. Take a look below or click the link to my homepage and have a play yourself.
A breakdown of this post, as usual click an item to jump straight to it:
Opening my eyes to Lottie
I was browsing through Twitter the other day and stumbled across this post and it piqued my interest.
Those little animated icons triggered something in me and I needed to know more and I needed to know how I could get them on my site - I mean Just look at these examples below. Who wouldn't want them on their site, with all the blinking and the pulsing?
What is a Lottie?
So what is Lottie then? Lottie is quite simply a JSON-based animation file (a text file) that can be rendered on screen by multiple different platforms i.e web, Android, iOS etc. Similar to any vector artwork, Lottie files are mathematically calculated and so they can be scaled up & down without the risk of pixelation, they are also extremely lightweight, meaning that they can be used on pretty much any device due to their minimal effect on performance.
Why Use Lottie?
Why use Lottie over the other solutions out there? Below are some of the main reasons:
Multi-Platform
As I mentioned above, Lottie can run natively on the web, iOS, Android and React Native, all without modification.
Scaleable
Lottie is resolution independent and therefore you can scale an image/animation at runtime without the risk of pixelation or distortion.
Small in size
Lottie files are small, really small. Unlike images such as PNGs or JPGs, Lottie files are just JSON files, which intern are just text files and therefore, there is a tiny amount of data to load which is Great for performance.
I really liked the explanation over on lottiefiles.com - "If a PNG is a T-Rex, and a GIF is an elephant, then a Lottie is a puppy"
High-Quality Animations
We all like sleek animations and with Lottie, the animations are in the files themselves which means that designers don't have to rely on the devs to recreate their work.
Interactivity
Lottie allows for interactivity by exposing elements and parameters which can then be targeted at runtime. As an example, those same icons I showed earlier now only play when you mouse over them (sorry mobile users, this is not for you).
How are Lotties Created?
There are several different options out there for creating these fantastic little animations but the most common process is to use Adobe After Effects in combination with Bodymovin, a plugin developed by Hernan Torrisi back in 2015.
There are also other options out there, including but not limited to Flow and Haiku Animator when it comes to creating animations.
I am not going to cover how to create these files in this post (I intend to do a follow-up post all about creation and implementation) but one of the great things about Lottie files is that there are thousands of free animations out there for you to use on your own site or in your own apps.
Which leads me on to...
Where can you get Lottie animations?
With just a quick Google search you will be able to find multiple different websites serving up fresh new Lotties but to get started check out the ones I have listed below.
Wrap up
So there you have Lotties. I hope I haven't sent you all down the rabbit hole which I went down as I must admit it has been rather disruptive to my productivity and my day-to-day activities. Then again, I have gotten a blog post out of it and you may be able to make use of these little files yourselves, in which case I hope you do go down the rabbit hole. I guess it's a question of whether you are taking the blue or the red pill today.
Be sure to subscribe at the bottom of the page if you don't want to miss out on more posts like this. I intend to cover, in full detail, how I have implemented Lotties into my site and getting them running smoothly with Wix.
Please do like and share if you believe it to be worthy. It really helps me out!
Comments