Agent skill

lottie-animations

Lottie animation skill for integrating After Effects animations into iOS, Android, and cross-platform mobile apps with playback control, performance optimization, and interactive animation capabilities.

View SKILL.md on GitHub Repository
Stars 514
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/a5c-ai/babysitter/tree/main/library/specializations/mobile-development/skills/lottie-animations

SKILL.md

Lottie Animations Skill

Comprehensive Lottie animation integration for mobile platforms, enabling high-quality vector animations from After Effects in iOS, Android, React Native, and Flutter applications.

Overview

This skill provides capabilities for integrating Lottie animations into mobile applications, including animation playback control, performance optimization, interactive animations, and proper asset management across platforms.

Capabilities

Animation Integration

  • Import and validate Lottie JSON files
  • Configure lottie-ios for native iOS apps
  • Set up lottie-android for native Android apps
  • Integrate lottie-react-native for React Native
  • Configure lottie for Flutter apps

Playback Control

  • Implement play, pause, stop controls
  • Configure animation speed and direction
  • Set up loop modes (none, loop, autoReverse)
  • Implement progress-based playback
  • Handle animation completion callbacks

Interactive Animations

  • Implement gesture-driven animations
  • Configure animation markers/segments
  • Sync animations with scroll position
  • Implement drag-based animation control
  • Handle touch interaction with animation

Performance Optimization

  • Optimize animation file size
  • Configure rendering modes (software/hardware)
  • Implement animation caching
  • Handle memory management
  • Preload animations for smooth playback

Asset Management

  • Organize animation assets
  • Configure dynamic text replacement
  • Handle color theming
  • Manage animation versioning
  • Implement asset preloading

Prerequisites

iOS Development

ruby
# Podfile
pod 'lottie-ios'

# Or Swift Package Manager
# https://github.com/airbnb/lottie-ios.git

Android Development

groovy
// build.gradle
dependencies {
    implementation 'com.airbnb.android:lottie:6.3.0'
}

React Native

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

# iOS pods
cd ios && pod install

Flutter

yaml
# pubspec.yaml
dependencies:
  lottie: ^3.0.0

Usage Patterns

iOS (SwiftUI)

swift
import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    let animationName: String
    let loopMode: LottieLoopMode
    let animationSpeed: CGFloat
    @Binding var isPlaying: Bool

    func makeUIView(context: Context) -> LottieAnimationView {
        let animationView = LottieAnimationView(name: animationName)
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = loopMode
        animationView.animationSpeed = animationSpeed
        return animationView
    }

    func updateUIView(_ animationView: LottieAnimationView, context: Context) {
        if isPlaying {
            animationView.play()
        } else {
            animationView.pause()
        }
    }
}

// Usage
struct ContentView: View {
    @State private var isPlaying = true

    var body: some View {
        VStack {
            LottieView(
                animationName: "loading",
                loopMode: .loop,
                animationSpeed: 1.0,
                isPlaying: $isPlaying
            )
            .frame(width: 200, height: 200)

            Button(isPlaying ? "Pause" : "Play") {
                isPlaying.toggle()
            }
        }
    }
}

iOS (UIKit)

swift
import Lottie

class AnimationViewController: UIViewController {
    private var animationView: LottieAnimationView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupAnimation()
    }

    private func setupAnimation() {
        animationView = LottieAnimationView(name: "success")
        animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        animationView.center = view.center
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .playOnce
        view.addSubview(animationView)
    }

    func playAnimation() {
        animationView.play { completed in
            if completed {
                print("Animation completed")
            }
        }
    }

    func playSegment(from: CGFloat, to: CGFloat) {
        animationView.play(fromProgress: from, toProgress: to, loopMode: .playOnce)
    }

    func setProgress(_ progress: CGFloat) {
        animationView.currentProgress = progress
    }
}

Android (Kotlin - Jetpack Compose)

kotlin
import com.airbnb.lottie.compose.*

@Composable
fun LottieAnimationScreen() {
    val composition by rememberLottieComposition(
        LottieCompositionSpec.RawRes(R.raw.loading)
    )
    val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )

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

// Controllable animation
@Composable
fun ControllableLottieAnimation() {
    val composition by rememberLottieComposition(
        LottieCompositionSpec.RawRes(R.raw.success)
    )
    var isPlaying by remember { mutableStateOf(false) }
    val progress by animateLottieCompositionAsState(
        composition = composition,
        isPlaying = isPlaying,
        restartOnPlay = true
    )

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        LottieAnimation(
            composition = composition,
            progress = { progress },
            modifier = Modifier.size(200.dp)
        )

        Button(onClick = { isPlaying = true }) {
            Text("Play")
        }
    }
}

// Progress-based animation
@Composable
fun ScrollSyncedAnimation(scrollProgress: Float) {
    val composition by rememberLottieComposition(
        LottieCompositionSpec.RawRes(R.raw.scroll_animation)
    )

    LottieAnimation(
        composition = composition,
        progress = { scrollProgress },
        modifier = Modifier.fillMaxWidth()
    )
}

Android (XML Views)

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

class AnimationActivity : AppCompatActivity() {
    private lateinit var animationView: LottieAnimationView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_animation)

        animationView = findViewById(R.id.animation_view)
        setupAnimation()
    }

    private fun setupAnimation() {
        animationView.apply {
            setAnimation(R.raw.loading)
            repeatCount = LottieDrawable.INFINITE
            speed = 1.0f
        }
    }

    fun playAnimation() {
        animationView.playAnimation()
    }

    fun pauseAnimation() {
        animationView.pauseAnimation()
    }

    fun setProgress(progress: Float) {
        animationView.progress = progress
    }

    fun playSegment(startFrame: Int, endFrame: Int) {
        animationView.setMinAndMaxFrame(startFrame, endFrame)
        animationView.playAnimation()
    }
}

React Native

javascript
import React, { useRef, useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

const AnimationScreen = () => {
  const animationRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const playAnimation = () => {
    animationRef.current?.play();
    setIsPlaying(true);
  };

  const pauseAnimation = () => {
    animationRef.current?.pause();
    setIsPlaying(false);
  };

  const resetAnimation = () => {
    animationRef.current?.reset();
    setIsPlaying(false);
  };

  return (
    <View style={styles.container}>
      <LottieView
        ref={animationRef}
        source={require('./animations/success.json')}
        style={styles.animation}
        autoPlay={false}
        loop={false}
        onAnimationFinish={() => setIsPlaying(false)}
      />

      <View style={styles.controls}>
        <Button
          title={isPlaying ? 'Pause' : 'Play'}
          onPress={isPlaying ? pauseAnimation : playAnimation}
        />
        <Button title="Reset" onPress={resetAnimation} />
      </View>
    </View>
  );
};

// Progress-controlled animation
const ScrollAnimation = ({ scrollProgress }) => {
  return (
    <LottieView
      source={require('./animations/scroll-animation.json')}
      progress={scrollProgress}
      style={styles.animation}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  animation: {
    width: 200,
    height: 200,
  },
  controls: {
    flexDirection: 'row',
    marginTop: 20,
  },
});

export default AnimationScreen;

Flutter

dart
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class AnimationScreen extends StatefulWidget {
  @override
  _AnimationScreenState createState() => _AnimationScreenState();
}

class _AnimationScreenState extends State<AnimationScreen>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset(
              'assets/animations/success.json',
              controller: _controller,
              width: 200,
              height: 200,
              onLoaded: (composition) {
                _controller.duration = composition.duration;
              },
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => _controller.forward(),
                  child: Text('Play'),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () => _controller.stop(),
                  child: Text('Stop'),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () => _controller.reset(),
                  child: Text('Reset'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// Looping animation
class LoadingAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/animations/loading.json',
      width: 100,
      height: 100,
      repeat: true,
    );
  }
}

// Network animation
class NetworkAnimation extends StatelessWidget {
  final String url;

  const NetworkAnimation({required this.url});

  @override
  Widget build(BuildContext context) {
    return Lottie.network(
      url,
      width: 200,
      height: 200,
      frameRate: FrameRate.max,
    );
  }
}

Integration with Babysitter SDK

Task Definition Example

javascript
const lottieIntegrationTask = defineTask({
  name: 'lottie-animation-setup',
  description: 'Integrate Lottie animations into mobile app',

  inputs: {
    platform: { type: 'string', required: true, enum: ['ios', 'android', 'react-native', 'flutter'] },
    projectPath: { type: 'string', required: true },
    animationFiles: { type: 'array', items: { type: 'string' } },
    features: {
      type: 'array',
      items: { type: 'string', enum: ['playback_control', 'progress_sync', 'gestures', 'theming'] }
    }
  },

  outputs: {
    integratedAnimations: { type: 'array' },
    componentCode: { type: 'string' },
    optimizationReport: { type: 'object' }
  },

  async run(inputs, taskCtx) {
    return {
      kind: 'skill',
      title: `Integrate Lottie for ${inputs.platform}`,
      skill: {
        name: 'lottie-animations',
        context: {
          operation: 'integrate',
          platform: inputs.platform,
          projectPath: inputs.projectPath,
          animations: inputs.animationFiles,
          features: inputs.features
        }
      },
      io: {
        inputJsonPath: `tasks/${taskCtx.effectId}/input.json`,
        outputJsonPath: `tasks/${taskCtx.effectId}/result.json`
      }
    };
  }
});

Animation Optimization

File Size Optimization

bash
# Use LottieFiles optimizer
npx @nicolo-ribaudo/lottie-optimize animation.json -o optimized.json

# Or use online tools:
# https://lottiefiles.com/tools/lottie-optimizer

Performance Tips

  1. Reduce complexity: Simplify paths and shapes in After Effects
  2. Limit layers: Fewer layers = better performance
  3. Avoid masks: Use shape layers instead when possible
  4. Cache compositions: Reuse loaded animations
  5. Use hardware acceleration: Enable when available
  6. Preload animations: Load before display needed

Memory Management

swift
// iOS - Clear cache when needed
LottieAnimationView.clearCache()

// Load from cache
let animation = LottieAnimation.named("loading", animationCache: LRUAnimationCache.sharedCache)
kotlin
// Android - Configure cache
val cacheComposition = LottieCompositionFactory
    .fromRawRes(context, R.raw.animation)
    .addListener { composition ->
        // Animation loaded
    }

Best Practices

  1. Optimize Before Integration: Use LottieFiles optimizer
  2. Lazy Load: Load animations only when needed
  3. Cache Animations: Reuse loaded compositions
  4. Handle Errors: Gracefully handle loading failures
  5. Test Performance: Profile on low-end devices
  6. Accessibility: Provide alternatives for motion-sensitive users

References

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

a5c-ai/babysitter

gsd-tools

Central utility skill for GSD operations. Provides config parsing, slug generation, timestamps, path operations, and orchestrates calls to other specialized skills. Acts as the unified entry point that the original gsd-tools.cjs provided via its lib/ modules (commands, config, core, init).

514 31
Explore
a5c-ai/babysitter

model-profile-resolution

Resolve model profile (quality/balanced/budget) at orchestration start and map agents to specific models. Enables cost/quality tradeoffs by selecting appropriate AI models for each agent role.

514 31
Explore
a5c-ai/babysitter

verification-suite

Plan structure validation, phase completeness checks, reference integrity verification, and artifact existence confirmation. Provides the structured verification layer ensuring GSD artifacts are well-formed and complete.

514 31
Explore
a5c-ai/babysitter

state-management

STATE.md reading, writing, and field-level updates. Provides cross-session state persistence via .planning/STATE.md with structured fields for current task, completed phases, blockers, decisions, and quick tasks.

514 31
Explore
a5c-ai/babysitter

git-integration

Git commit patterns, formats, and conventions for GSD methodology. Provides atomic commits per task, structured commit messages, planning file commits, branch management, and milestone tag operations.

514 31
Explore
a5c-ai/babysitter

frontmatter-parsing

YAML frontmatter parsing and manipulation for .planning/ documents. Provides read, write, update, query, and validation operations on frontmatter blocks in GSD markdown artifacts.

514 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results