Remove Background & Export Lottie JSON Animation

Lottie is a mobile-first animation format created by Airbnb. It exports animations as JSON files that can be rendered natively on iOS, Android, and web platforms using the Lottie library.

Technical specifications:

• Format: JSON with embedded WebP images
• Transparency: Full alpha channel (via WebP)
• Animation: Vector + raster hybrid
• File Size: Very small (typically <100KB)
• Playback: Hardware accelerated
• Control: Programmatic (play, pause, loop, speed, etc.)

How it works: Our Lottie export uses a hybrid approach - the JSON describes the animation timing and transforms, while the actual video frames are embedded as compressed WebP images. This provides the best balance of quality and file size.

Key advantage: Unlike video files (MP4, MOV), Lottie gives you complete control over playback speed, looping, direction, and can even be scrubbed to specific frames.

Choose Lottie JSON when you need:

• Mobile apps - iOS, Android, React Native
• Tiny file sizes - Bandwidth and storage critical
• UI animations - Loading screens, onboarding, micro-interactions
• Playback control - Play, pause, loop, reverse, speed control
• Interactive animations - Scrub to specific frames, respond to user input
• Battery efficiency - Hardware accelerated rendering

Lottie vs other formats:

• vs WebM/MOV: 10-50x smaller files, programmatic control, but requires Lottie library
• vs GIF: Much smaller files (10-20x), better quality, but needs library support
• vs WebP: Similar compression, but adds animation control and mobile optimization
• vs PNG Sequence: 50-100x smaller, includes timing in JSON

Best for: Mobile apps, UI animations, loading screens, onboarding flows Not ideal for: Long videos (>10s), web deployment (use WebM instead), video editing

Using Lottie in iOS is straightforward with the Lottie-iOS library:

1. Install Lottie-iOS:

Swift Package Manager:

dependencies: [
  .package(url: "https://github.com/airbnb/lottie-ios.git", from: "4.0.0")
]

CocoaPods:

pod 'lottie-ios'

2. Add your animation.json file to your project

3. Use in SwiftUI:

import Lottie

struct ContentView: View {
  var body: some View {
    LottieView(animation: .named("animation"))
      .playing(loopMode: .loop)
      .resizable()
      .frame(width: 200, height: 200)
  }
}

4. Use in UIKit:

import Lottie

let animationView = LottieAnimationView(name: "animation")
animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.play()
view.addSubview(animationView)

Advanced controls:

// Play with completion handler
animationView.play { finished in
  print("Animation finished: \\(finished)")
}

// Control speed
animationView.animationSpeed = 1.5

// Play in reverse
animationView.play(fromProgress: 1, toProgress: 0)

// Scrub to specific frame
animationView.currentProgress = 0.5 // 50%

Lottie animations in iOS are hardware accelerated and battery efficient.

Using Lottie in Android with Lottie-Android library:

1. Add dependency (build.gradle):

dependencies {
  implementation "com.airbnb.android:lottie:6.0.0"
}

2. Add animation.json to assets folder:

• Place file in app/src/main/assets/

3. Use in XML Layout:

<com.airbnb.lottie.LottieAnimationView
  android:id="@+id/animation_view"
  android:layout_width="200dp"
  android:layout_height="200dp"
  app:lottie_fileName="animation.json"
  app:lottie_loop="true"
  app:lottie_autoPlay="true" />

4. Use in Kotlin/Java:

import com.airbnb.lottie.LottieAnimationView

val animationView = findViewById<LottieAnimationView>(R.id.animation_view)

// Play animation
animationView.playAnimation()

// Pause animation
animationView.pauseAnimation()

// Set speed
animationView.speed = 1.5f

// Play with listener
animationView.addAnimatorListener(object : AnimatorListenerAdapter() {
  override fun onAnimationEnd(animation: Animator?) {
    // Animation finished
  }
})

Jetpack Compose:

import com.airbnb.lottie.compose.*

@Composable
fun AnimationScreen() {
  val composition by rememberLottieComposition(
    LottieCompositionSpec.Asset("animation.json")
  )
  val progress by animateLottieCompositionAsState(
    composition,
    iterations = LottieConstants.IterateForever
  )

  LottieAnimation(
    composition = composition,
    progress = { progress },
    modifier = Modifier.size(200.dp)
  )
}

Lottie works great in React Native with lottie-react-native:

1. Install library:

npm install lottie-react-native
# or
yarn add lottie-react-native

2. iOS additional setup:

cd ios && pod install

3. Use in React Native:

import React, { useRef } from 'react';
import LottieView from 'lottie-react-native';

export default function App() {
  const animationRef = useRef(null);

  return (
    <LottieView
      ref={animationRef}
      source={require('./animation.json')}
      autoPlay
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}

Advanced controls:

import React, { useRef, useEffect } from 'react';
import LottieView from 'lottie-react-native';

export default function App() {
  const animationRef = useRef(null);

  useEffect(() => {
    // Play animation
    animationRef.current?.play();

    // Or play specific segment
    animationRef.current?.play(30, 120);
  }, []);

  return (
    <LottieView
      ref={animationRef}
      source={require('./animation.json')}
      loop={false}
      speed={1.5}
      onAnimationFinish={() => {
        console.log('Animation finished');
      }}
      style={{ width: 200, height: 200 }}
    />
  );
}

Load from URL:

<LottieView
  source={{ uri: 'https://example.com/animation.json' }}
  autoPlay
  loop
/>

Lottie is one of the most popular animation libraries in React Native.

Lottie is optimized for short animations. Keep it brief for best results:

Recommended lengths:

• ✅ 0.5-2 seconds: Perfect for micro-interactions, loading spinners (~20-50KB)
• ✅ 2-5 seconds: Good for onboarding, UI animations (~50-150KB)
• ⚠️ 5-10 seconds: Acceptable, but file size increases (~150-500KB)
• ❌ 10+ seconds: Too large, use video format instead (WebM, MP4)

File size examples:

• 1 second clip: ~30-60KB
• 3 second clip: ~80-150KB
• 5 second clip: ~150-300KB
• 10 second clip: ~300-600KB

Why keep it short:

• App bundle size: Every KB adds to your app download
• Memory usage: Larger files use more RAM during playback
• User experience: Short, focused animations are more effective
• Battery life: Longer animations drain battery faster

Comparison:

• Lottie (5s): ~150KB
• WebM (5s): ~800KB - 2MB
• GIF (5s): ~2-5MB
• MOV ProRes (5s): ~200-400MB

Best practices:

• Use Lottie for UI micro-interactions and short animations
• Use WebM for longer video content (10s+)
• Trim your video to the most essential action
• Loop short animations instead of using long ones