Implementing Lottie Animations in Mobile Apps

Bringing Lottie Animations to Mobile Apps

Lottie animations can transform your mobile app's user experience, making it feel more polished and engaging. This comprehensive guide covers everything you need to know about implementing Lottie animations in both iOS and Android applications.

Why Use Lottie in Mobile Apps?

Lottie animations offer unique advantages for mobile development:

• Lightweight: Significantly smaller than video files or image sequences
• Scalable: Perfect quality on all screen sizes and densities
• Cross-Platform: Same animation file works on iOS and Android
• Runtime Control: Programmatically control speed, direction, and playback
• No Keyframe Coding: Designers can create complex animations without developer intervention

iOS Implementation

Installation (CocoaPods)

# Podfile
pod 'lottie-ios'

# Then run
pod install

Installation (Swift Package Manager)

// In Xcode:
// File > Add Packages
// Enter: https://github.com/airbnb/lottie-ios.git

Basic Implementation (Swift)

import Lottie
import UIKit

class ViewController: UIViewController {
    private var animationView: LottieAnimationView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Load animation from bundle
        animationView = LottieAnimationView(name: "animation")
        animationView!.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        animationView!.center = view.center
        animationView!.contentMode = .scaleAspectFit
        animationView!.loopMode = .loop
        animationView!.animationSpeed = 1.0
        
        view.addSubview(animationView!)
        animationView!.play()
    }
}

Loading from URL

let url = URL(string: "https://assets.lottiefiles.com/packages/lf20_abc123.json")!

LottieAnimation.loadedFrom(url: url) { animation in
    let animationView = LottieAnimationView(animation: animation)
    animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
    animationView.center = self.view.center
    animationView.loopMode = .loop
    self.view.addSubview(animationView)
    animationView.play()
}

Playback Controls (iOS)

// Play animation
animationView.play()

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

// Play from progress to progress
animationView.play(fromProgress: 0, toProgress: 0.5)

// Play from frame to frame
animationView.play(fromFrame: 0, toFrame: 50)

// Pause
animationView.pause()

// Stop (returns to start)
animationView.stop()

// Set current progress
animationView.currentProgress = 0.5 // 50%

// Set current frame
animationView.currentFrame = 25

SwiftUI Implementation

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    let name: String
    let loopMode: LottieLoopMode
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        let animationView = LottieAnimationView(name: name)
        animationView.loopMode = loopMode
        animationView.contentMode = .scaleAspectFit
        animationView.play()
        
        view.addSubview(animationView)
        animationView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
}

// Usage
struct ContentView: View {
    var body: some View {
        LottieView(name: "animation", loopMode: .loop)
            .frame(width: 200, height: 200)
    }
}

Android Implementation

Installation (Gradle)

// app/build.gradle
dependencies {
    implementation 'com.airbnb.android:lottie:6.0.0'
}

Basic Implementation (XML)

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

Programmatic Implementation (Kotlin)

import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val animationView: LottieAnimationView = findViewById(R.id.animationView)
        
        // Load from assets
        animationView.setAnimation("animation.json")
        
        // Configure
        animationView.repeatCount = LottieDrawable.INFINITE
        animationView.speed = 1.0f
        
        // Play
        animationView.playAnimation()
    }
}

Loading from URL (Android)

animationView.setAnimationFromUrl("https://assets.lottiefiles.com/packages/lf20_abc123.json")

// With listener
animationView.setFailureListener { throwable ->
    Log.e("Lottie", "Failed to load animation", throwable)
}

animationView.playAnimation()

Playback Controls (Android)

// Play
animationView.playAnimation()

// Pause
animationView.pauseAnimation()

// Resume
animationView.resumeAnimation()

// Cancel
animationView.cancelAnimation()

// Set progress (0.0 - 1.0)
animationView.progress = 0.5f

// Set frame
animationView.frame = 25

// Set speed (1.0 = normal, 2.0 = 2x)
animationView.speed = 2.0f

// Add listener
animationView.addAnimatorListener(object : Animator.AnimatorListener {
    override fun onAnimationStart(animation: Animator) {}
    override fun onAnimationEnd(animation: Animator) {}
    override fun onAnimationCancel(animation: Animator) {}
    override fun onAnimationRepeat(animation: Animator) {}
})

Jetpack Compose Implementation

import com.airbnb.lottie.compose.*

@Composable
fun LottieAnimation() {
    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)
    )
}

With Controls (Compose)

@Composable
fun ControlledLottieAnimation() {
    val composition by rememberLottieComposition(
        LottieCompositionSpec.Asset("animation.json")
    )
    
    var isPlaying by remember { mutableStateOf(true) }
    
    val progress by animateLottieCompositionAsState(
        composition,
        isPlaying = isPlaying,
        iterations = LottieConstants.IterateForever
    )
    
    Column {
        LottieAnimation(
            composition = composition,
            progress = { progress },
            modifier = Modifier.size(200.dp)
        )
        
        Button(onClick = { isPlaying = !isPlaying }) {
            Text(if (isPlaying) "Pause" else "Play")
        }
    }
}

React Native Implementation

Installation

npm install lottie-react-native

# For iOS, also run:
cd ios && pod install

Basic Usage

import LottieView from 'lottie-react-native';

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

With Controls (React Native)

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

export default function ControlledAnimation() {
    const animationRef = useRef(null);
    
    return (
        <View>
            <LottieView
                ref={animationRef}
                source={require('./animation.json')}
                autoPlay={false}
                loop={false}
                style={{ width: 200, height: 200 }}
            />
            <Button 
                title="Play" 
                onPress={() => animationRef.current?.play()} 
            />
            <Button 
                title="Pause" 
                onPress={() => animationRef.current?.pause()} 
            />
            <Button 
                title="Reset" 
                onPress={() => animationRef.current?.reset()} 
            />
        </View>
    );
}

Performance Optimization

iOS Optimization

• Use the appropriate rendering engine (Automatic, CoreAnimation, or Main Thread)
• Cache animations when possible
• Reduce animation complexity for older devices
• Consider using lower frame rates for non-critical animations

Android Optimization

• Use hardware acceleration when available
• Enable merge paths for better performance
• Cache compositions for reuse
• Use the software rendering layer for complex animations

// Android: Enable hardware acceleration
animationView.setRenderMode(RenderMode.HARDWARE)

// Enable merge paths
animationView.enableMergePathsForKitKatAndAbove(true)

Common Use Cases in Mobile Apps

1. Splash Screens

Create engaging branded loading experiences:

• Company logo animations
• Brand story sequences
• Smooth transitions into the app

2. Loading States

Keep users engaged during data loading:

• Creative progress indicators
• Contextual loading animations
• Skeleton screens with animated placeholders

3. Onboarding Flows

Guide new users with beautiful animations:

• Feature explanations
• Tutorial walkthroughs
• Permission request illustrations

4. Success/Error Feedback

Provide clear visual feedback:

• Success checkmarks
• Error indicators
• Confirmation animations

5. Empty States

Turn empty screens into opportunities:

• Encouraging first-time actions
• Explaining features
• Adding personality to the app

Best Practices

• File Size: Keep animations under 200KB for best performance
• Complexity: Simpler animations perform better on all devices
• Testing: Test on older devices to ensure smooth playback
• Fallbacks: Have static alternatives for very old devices
• Battery: Avoid continuous looping animations that drain battery
• Accessibility: Respect reduced motion preferences
• Caching: Cache animations locally after first download

Respecting Accessibility

iOS Accessibility

// Check for reduced motion preference
if UIAccessibility.isReduceMotionEnabled {
    // Show static image instead
    imageView.image = UIImage(named: "static_image")
} else {
    // Show Lottie animation
    animationView.play()
}

Android Accessibility

// Check for reduced animation preference
val animationScale = Settings.Global.getFloat(
    contentResolver,
    Settings.Global.ANIMATOR_DURATION_SCALE,
    1.0f
)

if (animationScale == 0f) {
    // Show static image
} else {
    // Show animation
    animationView.playAnimation()
}

Conclusion

Lottie animations can significantly enhance your mobile app's user experience across both iOS and Android platforms. With native support for both platforms and consistent rendering, Lottie makes it easy to create polished, professional animations without sacrificing performance or file size.

Visit IconKing to discover thousands of mobile-ready Lottie animations perfect for your next app!