Measure & benchmark social media performance - Animation

Hey everyone,

long time no see:) We have finally started to do something with our website and I am currently working on a set of specific animations briefly describing the main features. We have been for quite some time experimenting with “Bodymovin” plugin for AE directly in our products and because we are always thinking about performance/data etc. I tried to used it also for our website (+ Lottie for implementation).

First problem I was trying to solve was how to move Sketch files into AE:) I ended with Sketch2AE plugin even though it has some problems with font and gradients (it can’t transfer gradients as an layer effects, only as a bitmap). I still find it better than to recreate UI elements inside Adobe products:)

Anyway, back to Bodymovin & Lottie. It’s a great “combo” made by awesome guys from Airbnb.
https://airbnb.design/lottie/

Bodymovin exports animation from AE to pure .json which you can then use in apps/websites/whatever you want. When you think about data efficiency: our .json has 300KB compared to 1.4MB video file. And it’s responsive while keeping the same quality. Only problem was with shadows when I had to go with a compromise solution.

You can check out the animation live on Codepen: https://codepen.io/zavor13/project/editor/DkzEjw

Hope you like it:)