The document discusses how animations created in After Effects can now be exported as JSON and added to web pages using the Lottie library, providing a seamless handoff between designers and developers. It traces the history from designers having to code animations from scratch to receiving feedback, to Airbnb releasing Lottie in 2017 which allowed animations to be exported and added easily to web pages. It then shows how Webflow has integrated Lottie since 2019, allowing designers to export animations and add them directly to pages without developers needing to write JavaScript.

1. MAKING THE DEVELOPMENT PROCESS
TRULY VISUAL
After Effects &
Lottie in Webflow

2. a very brief history lesson BEFORE 2017
DESIGNER DEVELOPER LIVE ANIMATION
“handoff”
<code from scratch> feedback
circle of hell
DESIGNER & DEVELOPER
export

3. a very brief history lesson 2017
Airbnb releases Lottie: a
library that lets developers
easily add After Effects
animations exported as
JSON with the bodymovin
plugin to the web, iOS, and
Android.

4. a very brief history lesson AFTER 2017
DESIGNER LIVE ANIMATION
export a true handoff
+
bodymovin
DEVELOPER
<drops it on the page>
renders JSON with Lottie

5. how things actually work
DESIGNER
DEVELOPER
LIVE ANIMATION
export a true handoff
+
bodymovin
“can we make it play on scroll?”
PRESENT DAY
<drops it on the page>
renders JSON with Lottie
googles “Lottie
animation play on
scroll”
writes a bunch of
javascript
tests it
writes more javascript
more testing
feedback
circle of hell

6. the Webflow way
DESIGNER
LIVE ANIMATION
export
+
bodymovin
SINCE SEPTEMBER 2019
upload
WEBFLOW
self-directed
feedback
loop of bliss

7. the goal

8. the demo
self-directed
feedback
loop of bliss

9. learn!

10. Thank you!
comment like subscribe