Lottie for Web Animation
For the last few months I’ve been working on some of my personal projects that have accumulated over the years. One of them was to complete my personal website which I have to admit is taking much longer than I expected.
In the last few days of working at BlueAntDigital we came across an animation library by AirbnbEng called Lottie which allows for After Effects animation to render on browser by exporting JSON document of the animation. We were quick to use this on a few micro sites we were working on and it led me believe that this can potentially be used for much more than just icon animations.
Once free of my official duties I started illustrating a simple drawing to see how complex rendering can Lottie handle. I wanted to create a simple illustration for the image section of my about page. The first few tries were a bit of a failure because some of the masks were not working and it cannot handle images. After a few trial and error I found that simple shapes work best path do great.
The major problem I had was the importing of the AI file to After effect. Since the render could only work with shape layers I needed to extract all the shapes from the AI layers. But doing so, the shape layers created multiple clipping mask group which I had to manually find and delete. The second issue was that the gradients don’t turn up when you extract the shape which wasn’t a big deal but redoing them is a repetitive task none the less.
I was pleased by the end result even though I think it could have been improved. I’m sure as Lottie progresses we will get more options to play with.
You can see the live example here: https://sahilmalhan.com/about/ or here.
P.S. Don’t mind the incomplete site.
