Above is a concept piece that was presented to Tesla. I worked on this project together with the fine folks over at Outlines Inc. Below is the sketch that I worked off of. I made some minor tweaks to the artwork in Adobe Illustrator and then imported the vector art into After Effects. The final animation was exported as a Lottie animation and embedded using the web player code from LottieFiles.com.
Elon Musk Self-Drawing Portrait Read More »
The 2020 presidential campaign was a highly contentious one. One of the more interesting movements to come out of it was Brett Weintstein’s Unity 2020 campaign. The goal was to build a genuine third party alternative while avoiding the pitfalls and criticisms that typically accompany a third party candidate. I thought this was a worthy cause and decided to volunteer some design work to the group.
The animated logo above attempts to symbolize the desire to break the existing left-right political paradigm and build something new out of what remains.
The final product is a web-friendly Lottie animation.
The second part of the campaign came when two candidates were “drafted” from the two major American political parties. The idea was that they would govern as a team. The two candidates drafted for Unity 2020’s campaign were Tulsi Gabbard and Dan Crenshaw. Above is an animated campaign graphic.
Both graphics were created using Bodymovin and After Effects. Some finishing touches were added using the Keyshape App. The second graphic with Tulsi Gabbard and Dan Crenshaw relied heavily on the Astute Graphics plugin suite, specifically the Width Stamp and Vector First Aid tools.
The first animation was embedded with the help of LottieFiles.com’s web player tool. I added a few CSS tweaks of my own. You can see the exact code that was used to implement the Lottie animation below (using a WordPress CMS):
<script
src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets7.lottiefiles.com/packages/lf20_lgfw2plh.json" background="transparent" speed="1" style="width: 100%; max-width: 1000px; display: block; margin-left: auto; margin-right: auto;" loop autoplay></lottie-player>The second animation (just for a personal test) was exported with the Keyshape app, using their Keyshape file format. The SVG was uploaded to and hosted on my Codepen account. The exact code for implementation (again, using a WordPress CMS) is below:
<object style="
width: 100vw;
max-width: 500px;
display: block;
margin-left: auto;
margin-right: auto" type="image/svg+xml" data="https://assets.codepen.io/2032127/gabbard-crenshaw.svg">
</object>There are so many tools available for creating lightweight vector graphics — or even something as simple as an animation with a transparent background. The ability to mix and match these tools and plugins means there’s more opportunity than ever to produce some remarkably detailed artwork while keeping file sizes small (i.e. mobile-friendly). We can have the best of both worlds.
Unity 2020 Presidential Campaign Read More »
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.
Covid-19 ‘Flatten The Curve’ Explainer Animation Read More »