Issue #000
20 / 20 / 2020
Chapter 001
intro
The following manual will outline a method which allows a user to create interesting Lottie animations without writing a single line of code. It is most suited to creating short, mono-chromatic animations that would be difficult to create by hand (eg: 3D physics simulations).
For highly complex or demanding animations you should either use the video method, or bite the bullet and write some custom code using either css (see fig .001) or javascript libraries such as three.js, gsap or anime.js.
However, if it can be done in Lottie, small file sizes, infinite resolution and user interactivity are just some of the many benefits.
fig .001
css coded animation (source)
Chapter 002
specs
fig .002 (hover)
traced lottie animation (source)
Required:
Adobe After Effects
Webflow
Bodymovin or LottieFiles AE extensions
Optional:
3D Engine (Blender)
Source Video / GIF
Also check the Lottie Supported Features, as these limitations are always changing, and explain why the following method works.
Chapter 003
brief
In brief this method uses After Effect's auto-trace tool to detect the edges of a piece of source media, be it an already existing layer, a video file, or a pre-rendered scene. The auto-trace tool then creates a series of masks which are used as paths to draw exportable (Lottie approved) shapes.
fig .003
boiling lines
fig .004
three dimensional
fig .005
combination
Chapter 004
method
001 - Source (i)
Create your scene in the 3D engine and render it as either an image sequence or a video file.
For optimum ease with this method your render should have:
- High resolution and sharp edges.
- High a solid colour background distinguishable from the objects in the scene.
The render in (fig .006) was created using Blender's rigid body physics and then exported as a .mp4 video file.
fig .006
blender rendered video file
fig .007
reference gif file
001 - Source (ii)
Any source can technically be used for this method: videos, gifs or still images. The lightning Lottie on the specifications page of this manual (fig .002) was created by tracing the gif in (fig .007).
002 - Import
Import the source media into your After Effects composition.
I recommend matching your composition settings to those of the source media.
Use the Linear Colour Key effect (fig .008) to remove the background colour from the source media leaving transparency in its place.
fig .008
settings for removing background
fig .009
settings for auto-tracing
003 - Auto Trace
Set composition length to the length of the source media and with source layer selected:
Layer → Auto-Trace
Use the preview frame as a reference to fine tune the auto-trace settings until it looks like all your shapes have been accurately traced without creating an excessive amount of masks.
004 - Shape Setup
Add a new shape layer and add a single path to its contents.
Check how many masks exist in the layer created by the auto-trace tool (example has 44) and then duplicate the new shape layer's path until the shape has the same amount of paths (eg: 44 paths) in its contents.
fig .010
shape layer and its many paths
fig .011
how to reveal all mask paths
005 - Masks to Paths
Select all the masks in the layer created by the auto trace tool and search for 'mask path' to reveal just the path layer of each mask. (fig .011)
Select all these mask paths and copy them to the clipboard.
Select and expand all the paths in the new shape layer, then select all the expanded paths and paste in the mask paths (the paths will be pasted at the playhead position so make sure this is where you want it).
006 - Clean Up
Since the shape's paths don't share the opacity behaviour of their original masks, when the objects they are tracking disappear, the paths require manual adjustment.
With the new shape layer selected use the original source video as a reference to find unwanted, lingering paths and at the exact time that they are out of place, move them off the screen. (since these lingering paths are still used throughout the rest of the animation, they should be moved out of view instead of deleted)
fig .012
example of a lingering path
fig .013
final overview of layers with fill
007 - Fill In
Add a fill to the shape layer, and it should now resemble the source layer!
Since the shape layer simply uses animated paths and fills, it is now Lottie friendly and ready for export.
008 - Export
The Bodymovin extension can be used to export your animation as a ,json file.
Alternatively, the LottieFiles extension is able to preview your animation right inside After Effects, before exporting.
fig .014
LottieFiles extension preivew
fig .015
Lottie in Webflow's interaction engine
009 - Webflow
Drag and drop that .json into a Webflow project and your done!
The Lottie element created can be sized and transformed like any other HTML element.
The element's playback behaviour can be controlled via its settings tab, or by using Webflow's interactions engine. This is how the animation on the front page of this manual was rigged to play when the user scrolls the page.
Chapter 005
thoughts
What about multi-coloured animations?
Try a mono-chromatic source file, then matching colours to corresponding path fills (do-able, but tedious).
Animations without clear edges?
Vector animation types (like Lottie) probably aren't what you're after.
Super hectic animations with stuff flying about and crossing over a lot?
Sure, but be prepared spend some time in step 006 (hopefully less time than creating the animation by hand)
fig .016 (hover for colour)
multi-colour animation (source)
fig .016
trace modified Lottie (source)
Best case use:
Use the auto-trace tool to enhance standard vector animations (the sort you see on the LottieFiles featured page).
This way your vector animations can contain clean (well-labelled), controlled vector elements but also complex (physics simulated), auto-traced elements.