Convert Figma logo to code with AI

airbnb logolottie-ios

An iOS library to natively render After Effects vector animations

25,632
3,732
25,632
22

Top Related Projects

Render After Effects animations natively on Android and iOS, Web, and React Native

19,660

An extensible iOS and OS X animation library, useful for physics-based interactions.

Promises for Swift & ObjC.

22,021

Elegant transition library for iOS & tvOS

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

This component implements transition animation to crumble view-controller into tiny pieces.

Quick Overview

Lottie-ios is an iOS library that renders After Effects animations in real-time, allowing developers to easily add high-quality animations to their iOS applications. It parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile devices.

Pros

  • High-quality animations with small file sizes
  • Supports a wide range of After Effects features
  • Easy integration with iOS projects
  • Performant and optimized for mobile devices

Cons

  • Limited to animations created in After Effects
  • Some complex After Effects features may not be fully supported
  • Requires knowledge of After Effects for creating animations
  • Debugging complex animations can be challenging

Code Examples

  1. Loading and displaying a Lottie animation:
import Lottie

let animationView = LottieAnimationView(name: "animation")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
view.addSubview(animationView)
animationView.play()
  1. Controlling animation playback:
// Play from a specific progress
animationView.play(fromProgress: 0.5, toProgress: 1.0, loopMode: .playOnce) { finished in
    print("Animation finished")
}

// Pause the animation
animationView.pause()

// Stop the animation
animationView.stop()
  1. Changing animation properties dynamically:
// Change animation speed
animationView.animationSpeed = 2.0

// Set a specific frame
animationView.currentFrame = 50

// Add a value provider to change color dynamically
let colorValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))
animationView.setValueProvider(colorValueProvider, keypath: AnimationKeypath(keypath: "**.Fill 1.Color"))

Getting Started

  1. Install Lottie using CocoaPods by adding the following to your Podfile:

    pod 'lottie-ios'
    
  2. Run pod install in your project directory.

  3. Import Lottie in your Swift file:

    import Lottie
    
  4. Create and display an animation:

    let animationView = LottieAnimationView(name: "animation")
    animationView.frame = view.bounds
    view.addSubview(animationView)
    animationView.play()
    

Competitor Comparisons

Render After Effects animations natively on Android and iOS, Web, and React Native

Pros of lottie-android

  • Better performance for complex animations due to Android's rendering engine
  • More extensive customization options for animation properties
  • Smoother integration with native Android components and layouts

Cons of lottie-android

  • Slightly larger file size compared to lottie-ios
  • Less frequent updates and bug fixes
  • Some advanced features may require more setup and configuration

Code Comparison

lottie-android:

val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
animationView.setAnimation(R.raw.animation)
animationView.playAnimation()

lottie-ios:

let animationView = LOTAnimationView(name: "animation")
view.addSubview(animationView)
animationView.play()

Both libraries offer similar ease of use when implementing animations, with slight syntax differences due to the respective programming languages. The Android version provides more granular control over animation properties, while the iOS version focuses on simplicity and quick integration.

Overall, both lottie-android and lottie-ios are powerful tools for implementing Lottie animations in mobile applications. The choice between them primarily depends on the target platform and specific project requirements.

19,660

An extensible iOS and OS X animation library, useful for physics-based interactions.

Pros of Pop

  • Lightweight and focused on physics-based animations
  • Provides fine-grained control over animation properties
  • Easier to integrate into existing projects without major changes

Cons of Pop

  • Limited to basic animations and transitions
  • Requires more manual work to create complex animations
  • Less active development and community support

Code Comparison

Lottie-iOS:

let animationView = AnimationView(name: "animation")
view.addSubview(animationView)
animationView.play()

Pop:

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];
anim.toValue = @(200);
[layer pop_addAnimation:anim forKey:@"spring"];

Key Differences

  • Lottie-iOS focuses on playing complex, pre-designed animations from After Effects
  • Pop provides a framework for creating dynamic, physics-based animations programmatically
  • Lottie-iOS offers a higher level of abstraction, while Pop gives more low-level control
  • Lottie-iOS has better support for vector animations and shape morphing
  • Pop is better suited for simple, interactive animations that respond to user input

Both libraries have their strengths, but Lottie-iOS is generally more powerful for complex animations, while Pop excels in creating simple, physics-based effects with minimal code.

Promises for Swift & ObjC.

Pros of PromiseKit

  • Simplifies asynchronous programming with a clean, chainable syntax
  • Extensive support for various Swift and Objective-C frameworks
  • Robust error handling and type safety

Cons of PromiseKit

  • Steeper learning curve for developers new to promises
  • May introduce additional complexity for simple asynchronous tasks
  • Potential performance overhead compared to traditional callback-based approaches

Code Comparison

PromiseKit:

firstly {
    fetchUser()
}.then { user in
    fetchAvatar(for: user)
}.done { avatar in
    self.imageView.image = avatar
}.catch { error in
    print("Error: \(error)")
}

Lottie:

let animationView = AnimationView(name: "animation")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
view.addSubview(animationView)
animationView.play()

While PromiseKit focuses on simplifying asynchronous programming with promises, Lottie is specifically designed for rendering After Effects animations in iOS apps. PromiseKit offers a more general-purpose solution for managing asynchronous operations, while Lottie excels in providing a straightforward way to add complex animations to iOS applications without the need for manual animation code.

22,021

Elegant transition library for iOS & tvOS

Pros of Hero

  • Focuses on view controller transitions, offering more complex and customizable animations between screens
  • Provides a declarative API for easier implementation of custom transitions
  • Supports interactive gestures for transitions, enhancing user experience

Cons of Hero

  • Limited to view controller transitions, less versatile for general-purpose animations
  • May require more setup and configuration for complex transitions
  • Steeper learning curve for developers new to custom transitions

Code Comparison

Hero:

hero.isEnabled = true
hero.modalAnimationType = .fade
hero.fromViewController = sourceVC
hero.toViewController = destinationVC

Lottie:

let animationView = LottieAnimationView(name: "animation")
view.addSubview(animationView)
animationView.play()

Key Differences

  • Hero is specialized for view controller transitions, while Lottie is for general-purpose animations
  • Lottie uses JSON files for animations, Hero uses code-based configurations
  • Hero offers more control over transition timing and interactions
  • Lottie provides a wider range of animation types, including vector animations

Use Cases

  • Use Hero for custom app navigation and screen transitions
  • Choose Lottie for complex, pre-designed animations and illustrations within views

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

Pros of animated-tab-bar

  • Focused specifically on tab bar animations, making it easier to implement for this use case
  • Lightweight and simple to use, with a straightforward API
  • Provides pre-built animation styles out of the box

Cons of animated-tab-bar

  • Limited to tab bar animations only, less versatile than Lottie
  • Fewer customization options and less complex animations compared to Lottie
  • Smaller community and less frequent updates

Code Comparison

animated-tab-bar:

let animatedTabBar = RAMAnimatedTabBarController()
let item = RAMAnimatedTabBarItem(title: "Home", image: UIImage(named: "home"), tag: 1)
item.animation = RAMBounceAnimation()
animatedTabBar.viewControllers = [homeViewController]
animatedTabBar.setViewControllers([homeViewController], animated: true)

Lottie:

let animationView = LottieAnimationView(name: "animation")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
view.addSubview(animationView)
animationView.play()

While animated-tab-bar provides a simpler API for tab bar animations, Lottie offers more flexibility and power for general-purpose animations. animated-tab-bar is ideal for quick tab bar implementations, while Lottie excels in creating complex, custom animations throughout an app.

This component implements transition animation to crumble view-controller into tiny pieces.

Pros of StarWars.iOS

  • Focused on a specific theme (Star Wars), which can be appealing for niche projects
  • Simpler implementation for basic animations
  • Smaller codebase, potentially easier to understand and modify

Cons of StarWars.iOS

  • Limited to a specific use case, less versatile than Lottie-iOS
  • Less actively maintained and updated
  • Smaller community and fewer resources available

Code Comparison

StarWars.iOS:

let animation = CAKeyframeAnimation(keyPath: "transform.rotation")
animation.values = [0, 0.14, 0, -0.14, 0]
animation.duration = 0.3
animation.isAdditive = true
layer.add(animation, forKey: "shake")

Lottie-iOS:

let animationView = AnimationView(name: "animation")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
view.addSubview(animationView)
animationView.play()

The StarWars.iOS example shows a simple shake animation using Core Animation, while Lottie-iOS demonstrates loading and playing a more complex animation from a JSON file. Lottie-iOS offers a higher level of abstraction and more advanced animation capabilities.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Lottie for iOS

Version Carthage Compatible SwiftPM License Platform Swift Versions

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

Lottie is a cross-platform library for iOS, macOS, tvOS, visionOS, Android, and Web that natively renders vector-based animations and art in realtime with minimal code.

Lottie loads and renders animations and vectors exported in the bodymovin JSON format. Bodymovin JSON can be created and exported from After Effects with bodymovin, Sketch with Lottie Sketch Export, and from Haiku.

Designers can create and ship beautiful animations without an engineer painstakingly recreating them by hand. Since the animations are backed by JSON, they are extremely small in size but can be large in complexity! Animations can be played, resized, looped, sped up, slowed down, reversed, and even interactively scrubbed. Lottie can play or loop just a portion of the animation as well, the possibilities are endless! Animations can even be changed at runtime in various ways! Change the color, position, or any keyframable value!

Here is just a small sampling of the power of Lottie

Example1 Example2

Example3

Abcs

Installing Lottie

Lottie supports Swift Package Manager, CocoaPods, and Carthage (Both dynamic and static).

Github Repo

You can pull the Lottie Github Repo and include the Lottie.xcodeproj to build a dynamic or static library.

Swift Package Manager

To install Lottie using Swift Package Manager you can follow the tutorial published by Apple using the URL for the Lottie repo with the current version:

  1. In Xcode, select “File” → “Add Packages...”
  2. Enter https://github.com/airbnb/lottie-spm.git

or you can add the following dependency to your Package.swift:

.package(url: "https://github.com/airbnb/lottie-spm.git", from: "4.5.0")

When using Swift Package Manager we recommend using the lottie-spm repo instead of the main lottie-ios repo. The main git repository for lottie-ios is somewhat large (300+ MB), and Swift Package Manager always downloads the full repository with all git history. The lottie-spm repo is much smaller (less than 500kb), so can be downloaded much more quickly.

Instead of downloading the full git history of Lottie and building it from source, the lottie-spm repo just contains a pointer to the precompiled XCFramework included in the latest lottie-ios release (typically ~8MB). If you prefer to include Lottie source directly your project, you can directly depend on the main lottie-ios repo by referencing https://github.com/airbnb/lottie-ios.git instead.

CocoaPods

Add the pod to your Podfile:

pod 'lottie-ios'

And then run:

pod install

After installing the cocoapod into your project import Lottie with

import Lottie

Carthage

Add Lottie to your Cartfile:

github "airbnb/lottie-ios" "master"

And then run:

carthage update

In your application targets “General” tab under the “Linked Frameworks and Libraries” section, drag and drop lottie-ios.framework from the Carthage/Build/iOS directory that carthage update produced.

Swift Version Support

Lottie supports Swift / Xcode versions back to the minimum version that is permitted by Apple for submissions to the App Store. You can see the most up-to-date information for which Swift versions Lottie supports on Swift Package Index:

Swift Versions

Privacy

Lottie does not collect any data. We provide this notice to help you fill out App Privacy Details. We additionally provide a privacy manifest which can be included in your app.

Security

We distribute XCFramework bundles for each release on GitHub. In Lottie 4.4.0 and later, these XCFramework bundles include a code signature. These bundles are self-signed under the name "Lottie iOS" and have the following fingerprint:

89 2F 1B 43 04 7B 50 53 8F 2F 46 EA D9 29 00 DD 3D 48 11 F358 21 78 C0 61 A5 FB 20 F1 11 CB 26

In Xcode you can verify this by selecting Lottie.xcframework and confirming that it shows the following information:

Code Signature in Xcode

Contributing

We always appreciate contributions from the community. To make changes to the project, you can clone the repo and open Lottie.xcworkspace. This workspace includes:

  • the Lottie framework (for iOS, macOS, and tvOS)
  • unit tests and snapshot tests (for iOS, must be run on an iPhone 8 simulator)
  • an Example iOS app that lets you browse and test over 100 sample animations included in the repo

All pull requests with new features or bug fixes that affect how animations render should include snapshot test cases that validate the included changes.

  • To add a new sample animation to the snapshot testing suite, you can add the .json file to Tests/Samples. Re-run the snapshot tests to generate the new snapshot image files.
  • To update existing snapshots after making changes, you can set isRecording = true in SnapshotTests.swift setUp() method and then re-run the snapshot tests.

The project also includes several helpful commands defined in our Rakefile. To use these, you need to install Bundler:

$ sudo gem install bundle
$ bundle install

For example, all Swift code should be formatted according to the Airbnb Swift Style Guide. After making changes, you can reformat the code automatically using SwiftFormat and SwiftLint by running bundle exec rake format:swift. Other helpful commands include:

$ bundle exec rake build:all # builds all targets for all platforms
$ bundle exec rake build:package:iOS # builds the Lottie package for iOS
$ bundle exec rake test:package # tests the Lottie package
$ bundle exec rake format:swift # reformat Swift code based on the Airbnb Swift Style Guide