• Stars
    star
    30,413
  • Rank 579 (Top 0.02 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Lottie for Web, Android, iOS, React Native, and Windows

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000:

View documentation, FAQ, help, examples, and more at airbnb.io/lottie

Example1

Example2

Example3

Community

Example4

Plugin installation

Option 1 (Recommended):

Download it from from aescripts + aeplugins: https://aescripts.com/bodymovin/

Option 2:

Or get it from the adobe store https://exchange.adobe.com/creativecloud.details.12557.html CC 2014 and up.

Other installation options:

Option 3:

  • download the ZIP from the repo.
  • Extract content and get the .zxp file from '/build/extension'
  • Use the ZXP installer from aescripts.com.

Option 4:

  • Close After Effects

  • Extract the zipped file on build/extension/bodymovin.zxp to the adobe CEP folder:
    WINDOWS:
    C:\Program Files (x86)\Common Files\Adobe\CEP\extensions or
    C:\<username>\AppData\Roaming\Adobe\CEP\extensions
    MAC:
    /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    (you can open the terminal and type:
    $ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    then type:
    $ ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    to make sure it was copied correctly type)

  • Edit the registry key:
    WINDOWS:
    open the registry key HKEY_CURRENT_USER/Software/Adobe/CSXS.6 and add a key named PlayerDebugMode, of type String, and value 1.
    MAC:
    open the file ~/Library/Preferences/com.adobe.CSXS.6.plist and add a row with key PlayerDebugMode, of type String, and value 1.

Option 5:

Install the zxp manually following the instructions here: https://helpx.adobe.com/x-productkb/global/installingextensionsandaddons.html Skip directly to "Install third-party extensions"

Option 6:

Install with Homebrew-adobe:

brew tap danielbayley/adobe
brew cask install lottie

After installing

  • Windows: Go to Edit > Preferences > Scripting & Expressions... > and check on "Allow Scripts to Write Files and Access Network"
  • Mac: Go to Adobe After Effects > Preferences > Scripting & Expressions... > and check on "Allow Scripts to Write Files and Access Network"

Old Versions

  • Windows: Go to Edit > Preferences > General > and check on "Allow Scripts to Write Files and Access Network"
  • Mac: Go to Adobe After Effects > Preferences > General > and check on "Allow Scripts to Write Files and Access Network"

HTML player installation

# with npm
npm install lottie-web

# with bower
bower install bodymovin

Or you can use the script file from here: https://cdnjs.com/libraries/bodymovin Or get it directly from the AE plugin clicking on Get Player

Demo

See a basic implementation here.

Examples

See examples on codepen.

How it works

Here's a video tutorial explaining how to export a basic animation and load it in an html page

After Effects

  • Open your AE project and select the bodymovin extension on Window > Extensions > bodymovin
  • A Panel will open with a Compositions tab listing all of your Project Compositions.
  • Select the composition you want to export.
  • Select a Destination Folder.
  • Click Render
  • look for the exported json file (if you had images or AI layers on your animation, there will be an images folder with the exported files)

HTML

  • get the lottie.js file from the build/player/ folder for the latest build
  • include the .js file on your html (remember to gzip it for production)
<script src="js/lottie.js" type="text/javascript"></script>

You can call lottie.loadAnimation() to start an animation. It takes an object as a unique param with:

  • animationData: an Object with the exported animation data. Note: If your animation contains repeaters and you plan to call loadAnimation multiple times with the same animation, please deep clone the object before passing it (see #1159 and #2151.)
  • path: the relative path to the animation object. (animationData and path are mutually exclusive)
  • loop: true / false / number
  • autoplay: true / false it will start playing as soon as it is ready
  • name: animation name for future reference
  • renderer: 'svg' / 'canvas' / 'html' to set the renderer
  • container: the dom element on which to render the animation

It returns the animation instance you can control with play, pause, setSpeed, etc.

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

Composition Settings:

Check this wiki page for an explanation for each setting. https://github.com/airbnb/lottie-web/wiki/Composition-Settings

Usage

Animation instances have these main methods:

play


stop


pause


setSpeed(speed)

  • speed: 1 is normal speed.

goToAndStop(value, isFrame)

  • value: numeric value.
  • isFrame: defines if first argument is a time based value or a frame based (default false).

goToAndPlay(value, isFrame)

  • value: numeric value.
  • isFrame: defines if first argument is a time based value or a frame based (default false).

setDirection(direction)

  • direction: 1 is forward, -1 is reverse.

playSegments(segments, forceFlag)

  • segments: array. Can contain 2 numeric values that will be used as first and last frame of the animation. Or can contain a sequence of arrays each with 2 numeric values.
  • forceFlag: boolean. If set to false, it will wait until the current segment is complete. If true, it will update values immediately.

setSubframe(useSubFrames)

  • useSubFrames: If false, it will respect the original AE fps. If true, it will update on every requestAnimationFrame with intermediate values. Default is true.

destroy()


getDuration(inFrames)

  • inFrames: If true, returns duration in frames, if false, in seconds.

Additional methods:

  • updateDocumentData -- updates a text layer's data More Info

Lottie has several global methods that will affect all animations:

lottie.play() -- with 1 optional parameter name to target a specific animation
lottie.stop() -- with 1 optional parameter name to target a specific animation
lottie.goToAndStop(value, isFrame, name) -- Moves an animation with the specified name playback to the defined time. If name is omitted, moves all animation instances.
lottie.setSpeed() -- first argument speed (1 is normal speed) -- with 1 optional parameter name to target a specific animation
lottie.setDirection() -- first argument direction (1 is normal direction.) -- with 1 optional parameter name to target a specific animation
lottie.searchAnimations() -- looks for elements with class "lottie" or "bodymovin"
lottie.loadAnimation() -- Explained above. returns an animation instance to control individually.
lottie.destroy(name) -- Destroys an animation with the specified name. If name is omitted, destroys all animation instances. The DOM element will be emptied.
lottie.registerAnimation() -- you can register an element directly with registerAnimation. It must have the "data-animation-path" attribute pointing at the data.json url
lottie.getRegisteredAnimations() -- returns all animations instances
lottie.setQuality() -- default 'high', set 'high','medium','low', or a number > 1 to improve player performance. In some animations as low as 2 won't show any difference.
lottie.setLocationHref() -- Sets the relative location from where svg elements with ids are referenced. It's useful when you experience mask issues in Safari.
lottie.freeze() -- Freezes all playing animations or animations that will be loaded
lottie.unfreeze() -- Unfreezes all animations
lottie.inBrowser() -- true if the library is being run in a browser
lottie.resize() -- Resizes all animation instances

Events

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart

you can also use addEventListener with the following events:

  • complete
  • loopComplete
  • drawnFrame
  • enterFrame
  • segmentStart
  • config_ready (when initial config is done)
  • data_ready (when all parts of the animation have been loaded)
  • data_failed (when part of the animation can not be loaded)
  • loaded_images (when all image loads have either succeeded or errored)
  • DOMLoaded (when elements have been added to the DOM)
  • destroy

Other loading options

  • if you want to use an existing canvas to draw, you can pass an extra object: 'rendererSettings' with the following configuration:
lottie.loadAnimation({
  container: element, // the dom element
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animationData, // the animation data
  // ...or if your animation contains repeaters:
  // animationData: cloneDeep(animationData), // e.g. lodash.clonedeep
  rendererSettings: {
    context: canvasContext, // the canvas context, only support "2d" context
    preserveAspectRatio: 'xMinYMin slice', // Supports the same options as the svg element's preserveAspectRatio property
    title: 'Accessible Title', // Adds SVG title element for accessible animation title
    description: 'Accessible description.', // Adds SVG desc element for accessible long description of animation
    clearCanvas: false,
    progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
    hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
    className: 'some-css-class-name',
    id: 'some-id',
  }
});

Doing this you will have to handle the canvas clearing after each frame
Another way to load animations is adding specific attributes to a dom element. You have to include a div and set it's class to "lottie". If you do it before page load, it will automatically search for all tags with the class "lottie". Or you can call lottie.searchAnimations() after page load and it will search all elements with the class "lottie".

  • Add the data.json to a folder relative to the html
  • Create a div that will contain the animation.
  • Required
    • A class called "lottie"
    • A "data-animation-path" attribute with relative path to the data.json
  • Optional
    • A "data-anim-loop" attribute
    • A "data-name" attribute to specify a name to target play controls specifically

Example

 <div style="width:1067px;height:600px"  class="lottie" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>

Preview

You can preview or take an svg snapshot of the animation to use as poster. After you render your animation, you can take a snapshot of any frame in the animation and save it to your disk. I recommend to pass the svg through an svg optimizer like https://jakearchibald.github.io/svgomg/ and play around with their settings.

Recommendations

Files

If you have any images or AI layers that you haven't converted to shapes (I recommend that you convert them, so they get exported as vectors, right click each layer and do: "Create shapes from Vector Layers"), they will be saved to an images folder relative to the destination json folder. Beware not to overwrite an existing folder on that same location.

Performance

This is real time rendering. Although it is pretty optimized, it always helps if you keep your AE project to what is necessary
More optimizations are on their way, but try not to use huge shapes in AE only to mask a small part of it.
Too many nodes will also affect performance.

Help

If you have any animations that don't work or want me to export them, don't hesitate to write.
I'm really interested in seeing what kind of problems the plugin has.
my email is [email protected]

AE Feature Support

  • The script supports precomps, shapes, solids, images, null objects, texts
  • It supports masks and inverted masks. Maybe other modes will come but it has a huge performance hit.
  • It supports time remapping
  • The script supports shapes, rectangles, ellipses and stars.
  • Expressions. Check the wiki page for more info.
  • Not supported: image sequences, videos and audio are not supported
  • No negative layer stretching! No idea why, but stretching a layer messes with all the data.

Development

npm install or bower install first npm start

Notes

  • If you want to modify the parser or the player, there are some gulp commands that can simplify the task
  • look at the great animations exported on codepen See examples on codepen.
  • gzipping the animation jsons and the player have a huge reduction on the filesize. I recommend doing it if you use it for a project.

Issues

  • For missing mask in Safari browser, please call lottie.setLocationHref(locationHref) before animation is generated. It usually caused by usage of base tag in html. (see above for description of setLocationHref)

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

More Repositories

1

javascript

JavaScript Style Guide
JavaScript
144,863
star
2

lottie-android

Render After Effects animations natively on Android and iOS, Web, and React Native
Java
34,940
star
3

lottie-ios

An iOS library to natively render After Effects vector animations
Swift
25,685
star
4

visx

🐯 visx | visualization components
TypeScript
19,315
star
5

react-sketchapp

render React components to Sketch βš›οΈπŸ’Ž
TypeScript
14,945
star
6

react-dates

An easily internationalizable, mobile-friendly datepicker library for the web
JavaScript
11,630
star
7

epoxy

Epoxy is an Android library for building complex screens in a RecyclerView
Java
8,488
star
8

css

A mostly reasonable approach to CSS and Sass.
6,936
star
9

mavericks

Mavericks: Android on Autopilot
Kotlin
5,825
star
10

hypernova

A service for server-side rendering your JavaScript views
JavaScript
5,821
star
11

knowledge-repo

A next-generation curated knowledge sharing platform for data scientists and other technical professions.
Python
5,470
star
12

ts-migrate

A tool to help migrate JavaScript code quickly and conveniently to TypeScript
TypeScript
5,401
star
13

aerosolve

A machine learning package built for humans.
Scala
4,797
star
14

lottie

Lottie documentation for http://airbnb.io/lottie.
HTML
4,457
star
15

DeepLinkDispatch

A simple, annotation-based library for making deep link handling better on Android
Java
4,377
star
16

ruby

Ruby Style Guide
Ruby
3,711
star
17

polyglot.js

Give your JavaScript the ability to speak many languages.
JavaScript
3,704
star
18

MagazineLayout

A collection view layout capable of laying out views in vertically scrolling grids and lists.
Swift
3,264
star
19

native-navigation

Native navigation library for React Native applications
Java
3,128
star
20

streamalert

StreamAlert is a serverless, realtime data analysis framework which empowers you to ingest, analyze, and alert on data from any environment, using datasources and alerting logic you define.
Python
2,847
star
21

infinity

UITableViews for the web (DEPRECATED)
JavaScript
2,803
star
22

HorizonCalendar

A declarative, performant, iOS calendar UI component that supports use cases ranging from simple date pickers all the way up to fully-featured calendar apps.
Swift
2,772
star
23

airpal

Web UI for PrestoDB.
Java
2,758
star
24

swift

Airbnb's Swift Style Guide
Markdown
2,332
star
25

Showkase

πŸ”¦ Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements
Kotlin
2,093
star
26

synapse

A transparent service discovery framework for connecting an SOA
Ruby
2,071
star
27

paris

Define and apply styles to Android views programmatically
Kotlin
1,907
star
28

AirMapView

A view abstraction to provide a map user interface with various underlying map providers
Java
1,868
star
29

react-with-styles

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation
JavaScript
1,704
star
30

rheostat

Rheostat is a www, mobile, and accessible slider component built with React
JavaScript
1,694
star
31

binaryalert

BinaryAlert: Serverless, Real-time & Retroactive Malware Detection.
Python
1,405
star
32

epoxy-ios

Epoxy is a suite of declarative UI APIs for building UIKit applications in Swift
Swift
1,201
star
33

nerve

A service registration daemon that performs health checks; companion to airbnb/synapse
Ruby
942
star
34

okreplay

πŸ“Ό Record and replay OkHttp network interaction in your tests.
Groovy
781
star
35

chronon

Chronon is a data platform for serving for AI/ML applications.
Scala
717
star
36

RxGroups

Easily group RxJava Observables together and tie them to your Android Activity lifecycle
Java
693
star
37

react-outside-click-handler

OutsideClickHandler component for React.
JavaScript
611
star
38

ResilientDecoding

This package makes your Decodable types resilient to decoding errors and allows you to inspect those errors.
Swift
592
star
39

babel-plugin-dynamic-import-node

Babel plugin to transpile import() to a deferred require(), for node
JavaScript
575
star
40

kafkat

KafkaT-ool
Ruby
503
star
41

babel-plugin-dynamic-import-webpack

Babel plugin to transpile import() to require.ensure, for Webpack
JavaScript
499
star
42

babel-plugin-inline-react-svg

A babel plugin that optimizes and inlines SVGs for your React Components.
JavaScript
474
star
43

BuckSample

An example app showing how Buck can be used to build a simple iOS app.
Objective-C
461
star
44

lunar

πŸŒ— React toolkit and design language for Airbnb open source and internal projects.
TypeScript
461
star
45

SpinalTap

Change Data Capture (CDC) service
Java
430
star
46

artificial-adversary

πŸ—£οΈ Tool to generate adversarial text examples and test machine learning models against them
Python
394
star
47

dynein

Airbnb's Open-source Distributed Delayed Job QueueingΒ System
Java
383
star
48

hammerspace

Off-heap large object storage
Ruby
369
star
49

trebuchet

Trebuchet launches features at people
Ruby
312
star
50

reair

ReAir is a collection of easy-to-use tools for replicating tables and partitions between Hive data warehouses.
Java
279
star
51

zonify

a command line tool for generating DNS records from EC2 instances
Ruby
270
star
52

ottr

Serverless Public Key Infrastructure Framework
Python
270
star
53

omniduct

A toolkit providing a uniform interface for connecting to and extracting data from a wide variety of (potentially remote) data stores (including HDFS, Hive, Presto, MySQL, etc).
Python
252
star
54

hypernova-react

React bindings for Hypernova.
JavaScript
248
star
55

smartstack-cookbook

The chef recipes for running and testing Airbnb's SmartStack
Ruby
245
star
56

interferon

Signaling you about infrastructure or application issues
Ruby
239
star
57

babel-preset-airbnb

A babel preset for transforming your JavaScript for Airbnb
JavaScript
227
star
58

backpack

A pack of UI components for Backbone projects. Grab your backpack and enjoy the Views.
HTML
223
star
59

goji-js

React ❀️ Mini Program
TypeScript
218
star
60

react-with-direction

Components to provide and consume RTL or LTR direction in React
JavaScript
191
star
61

stemcell

Airbnb's EC2 instance creation and bootstrapping tool
Ruby
185
star
62

hypernova-ruby

Ruby client for Hypernova.
Ruby
141
star
63

kafka-statsd-metrics2

Send Kafka Metrics to StatsD.
Java
135
star
64

optica

A tool for keeping track of nodes in your infrastructure
Ruby
134
star
65

sparsam

Fast Thrift Bindings for Ruby
C++
124
star
66

js-shims

JS language shims used by Airbnb.
JavaScript
123
star
67

lottie-spm

Swift Package Manager support for Lottie, an iOS library to natively render After Effects vector animations
Ruby
122
star
68

browser-shims

Browser and JS shims used by Airbnb.
JavaScript
118
star
69

bossbat

Stupid simple distributed job scheduling in node, backed by redis.
JavaScript
118
star
70

nimbus

Centralized CLI for JavaScript and TypeScript developer tools.
TypeScript
118
star
71

twitter-commons-sample

A sample REST service based on Twitter Commons
Java
103
star
72

is-touch-device

Is the current JS environment a touch device?
JavaScript
90
star
73

rudolph

A serverless sync server for Santa, built on AWS
Go
79
star
74

hypernova-node

node.js client for Hypernova
JavaScript
73
star
75

plog

Fire-and-forget UDP logging service with custom Netty pipelines & extensive monitoring
Java
72
star
76

react-create-hoc

Create a React Higher-Order Component (HOC) following best practices.
JavaScript
67
star
77

vulnture

Python
67
star
78

cloud-maker

Building castles in the sky
Ruby
67
star
79

deline

An ES6 template tag that strips unwanted newlines from strings.
JavaScript
64
star
80

react-with-styles-interface-react-native

Interface to use react-with-styles with React Native
JavaScript
63
star
81

sputnik

Scala
63
star
82

mocha-wrap

Fluent pluggable interface for easily wrapping `describe` and `it` blocks in Mocha tests.
JavaScript
54
star
83

react-with-styles-interface-aphrodite

Interface to use react-with-styles with Aphrodite
JavaScript
54
star
84

eslint-plugin-react-with-styles

ESLint plugin for react-with-styles
JavaScript
49
star
85

sssp

Software distribution by way of S3 signed URLs
Haskell
47
star
86

alerts

An example alerts repo, for use with airbnb/interferon.
Ruby
46
star
87

apple-tv-auth

Example application to demonstrate how to build Apple TV style authentication.
Ruby
44
star
88

airbnb-spark-thrift

A library for loadling Thrift data into Spark SQL
Scala
42
star
89

jest-wrap

Fluent pluggable interface for easily wrapping `describe` and `it` blocks in Jest tests.
JavaScript
40
star
90

billow

Query AWS data without API credentials. Don't wait for a response.
Java
38
star
91

gosal

A Sal client written in Go
Go
35
star
92

backbone.baseview

DEPRECATED: A simple base view class for Backbone.View
JavaScript
34
star
93

anotherlens

News Deeply X Airbnb.Design - Another Lens
HTML
33
star
94

eslint-plugin-miniprogram

TypeScript
33
star
95

react-component-variations

JavaScript
33
star
96

react-with-styles-interface-css

πŸ“ƒ CSS interface for react-with-styles
JavaScript
32
star
97

transformpy

transformpy is a Python 2/3 module for doing transforms on "streams" of data
Python
29
star
98

appear

reveal terminal programs in the gui
Ruby
29
star
99

puppet-munki

Puppet
28
star
100

pool-hall

JavaScript
26
star