This is a slightly tongue-in-cheek explainer graphic based on the now famous (or infamous) ‘flatten the curve’ article and infographic done by The Economist.
The animation was exported using the Bodymovin plugin and uses the wonderful scripts provided by LottieFiles.com. The entire graphic is exported to a JSON file that is 1.1MB in size. Below is all the code required to generate this animation:
See the Pen Flatten The Curve Explainer Graphic by Jeffrey Karl (@jeffreylkarl) on CodePen.
The animation displays at 60 frames per second and plays everywhere, including mobile devices. To get my vector graphics nice and clean, I relied heavily on the Vector First Aid plugin from Astute Graphics. The graphics were then ported over from Adobe Illustrator to After Effects using Overlord, where the final animation was completed.
With more and more people consuming content through their mobile devices, and motion graphics and video proving to be increasingly more important for maximizing engagement with audiences, Lottie is just about the best solution there is for producing dynamic, high-quality, lightweight motion graphics.