lottie

name: lottie description: Add and manage Lottie animations in the website using LottieFiles. Auto-activates when user asks about animations, lottie, motion graphics, or animated icons. Trigger words: "lottie", "animation", "animated icon", "motion graphic", "add animation", "lottiefiles" allowed-tools: Bash, Read, Write, Edit

Lottie Animation Skill

Add lightweight, scalable Lottie animations to the Mediar website using LottieFiles.

Current Animation Setup

The project currently uses Framer Motion (framer-motion@11.0.14) for animations. Lottie can be added alongside Framer Motion for more complex pre-made animations.

Installation

Install LottieFiles React Package

npm install @lottiefiles/dotlottie-react

This is the official LottieFiles package that supports both .json and .lottie (optimized) formats.

Basic Usage

Simple Lottie Component

Create a reusable Lottie component at components/lottie-animation.tsx:

"use client";

import { DotLottieReact } from "@lottiefiles/dotlottie-react";

interface LottieAnimationProps {
  src: string;
  loop?: boolean;
  autoplay?: boolean;
  className?: string;
  speed?: number;
}

export function LottieAnimation({
  src,
  loop = true,
  autoplay = true,
  className = "",
  speed = 1,
}: LottieAnimationProps) {
  return (
    <DotLottieReact
      src={src}
      loop={loop}
      autoplay={autoplay}
      className={className}
      speed={speed}
    />
  );
}

Usage Example

import { LottieAnimation } from "@/components/lottie-animation";

export function MyComponent() {
  return (
    <LottieAnimation
      src="https://lottie.host/xxx/animation.lottie"
      className="w-64 h-64"
    />
  );
}

Integration with Framer Motion

Combine Lottie with Framer Motion for scroll-triggered animations:

"use client";

import { motion, useInView } from "framer-motion";
import { useRef, useState, useEffect } from "react";
import { DotLottieReact, DotLottie } from "@lottiefiles/dotlottie-react";

interface AnimatedLottieProps {
  src: string;
  className?: string;
  playOnView?: boolean;
}

export function AnimatedLottie({
  src,
  className = "",
  playOnView = true,
}: AnimatedLottieProps) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.3 });
  const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);

  useEffect(() => {
    if (playOnView && dotLottie) {
      if (isInView) {
        dotLottie.play();
      } else {
        dotLottie.pause();
      }
    }
  }, [isInView, dotLottie, playOnView]);

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 20 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.6 }}
      className={className}
    >
      <DotLottieReact
        src={src}
        loop
        autoplay={!playOnView}
        dotLottieRefCallback={setDotLottie}
      />
    </motion.div>
  );
}

Local Animation Files

Storing Animations

Store Lottie files in public/animations/:

public/
  animations/
    loading.lottie
    success.lottie
    workflow.json

Using Local Files

<LottieAnimation src="/animations/loading.lottie" />

Controlled Playback

Play/Pause/Stop Controls

"use client";

import { useState, useCallback } from "react";
import { DotLottieReact, DotLottie } from "@lottiefiles/dotlottie-react";

export function ControlledLottie({ src }: { src: string }) {
  const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);

  const play = useCallback(() => dotLottie?.play(), [dotLottie]);
  const pause = useCallback(() => dotLottie?.pause(), [dotLottie]);
  const stop = useCallback(() => dotLottie?.stop(), [dotLottie]);

  return (
    <div>
      <DotLottieReact
        src={src}
        loop
        autoplay={false}
        dotLottieRefCallback={setDotLottie}
      />
      <div className="flex gap-2 mt-4">
        <button onClick={play}>Play</button>
        <button onClick={pause}>Pause</button>
        <button onClick={stop}>Stop</button>
      </div>
    </div>
  );
}

Segment Playback (Play Specific Frames)

const playSegment = useCallback(() => {
  if (dotLottie) {
    dotLottie.setSegment(0, 30); // Play frames 0-30
    dotLottie.play();
  }
}, [dotLottie]);

Event Handlers

<DotLottieReact
  src={src}
  loop
  autoplay
  dotLottieRefCallback={setDotLottie}
  onComplete={() => console.log("Animation complete")}
  onLoad={() => console.log("Animation loaded")}
  onPlay={() => console.log("Playing")}
  onPause={() => console.log("Paused")}
  onStop={() => console.log("Stopped")}
  onFrame={(frame) => console.log("Frame:", frame)}
/>

Common Animation Sources

LottieFiles Free Animations

Browse free animations at: https://lottiefiles.com/free-animations

Popular categories for business/SaaS:

• Loading/Processing: https://lottiefiles.com/search?q=loading
• Success/Checkmark: https://lottiefiles.com/search?q=success
• Workflow/Process: https://lottiefiles.com/search?q=workflow
• Robot/AI: https://lottiefiles.com/search?q=robot
• Data/Analytics: https://lottiefiles.com/search?q=analytics
• Document/File: https://lottiefiles.com/search?q=document

Using LottieFiles CDN

Copy the CDN URL from any animation on LottieFiles:

<LottieAnimation
  src="https://lottie.host/embedded/your-animation-id.lottie"
/>

Replacing Framer Motion Animations

Before (Framer Motion custom animation)

<motion.div
  className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500"
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ duration: 1.5, repeat: Infinity }}
/>

After (Lottie)

<LottieAnimation
  src="/animations/pulse.lottie"
  className="w-8 h-8"
/>

Performance Tips

1. Use .lottie format - Up to 80% smaller than .json
2. Lazy load - Only load animations when needed
3. Pause offscreen - Use useInView to pause animations not in viewport
4. Limit concurrent - Don't run too many animations simultaneously
5. Optimize size - Use LottieFiles editor to reduce complexity

Lazy Loading Example

import dynamic from "next/dynamic";

const LottieAnimation = dynamic(
  () => import("@/components/lottie-animation").then((mod) => mod.LottieAnimation),
  { ssr: false, loading: () => <div className="w-64 h-64 bg-muted animate-pulse" /> }
);

Workflow Animation Example

Replace custom step animations with Lottie:

"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";

const STEP_ANIMATIONS = {
  document: "https://lottie.host/xxx/document.lottie",
  ai: "https://lottie.host/xxx/ai-brain.lottie",
  typing: "https://lottie.host/xxx/typing.lottie",
  success: "https://lottie.host/xxx/checkmark.lottie",
};

interface WorkflowStep {
  animation: keyof typeof STEP_ANIMATIONS;
  label: string;
  description: string;
}

export function LottieWorkflowAnimation() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.3 });

  const steps: WorkflowStep[] = [
    { animation: "document", label: "PDF Arrives", description: "Invoice received" },
    { animation: "ai", label: "AI Reads", description: "Extracts data" },
    { animation: "typing", label: "Enters Data", description: "Types into SAP" },
    { animation: "success", label: "Done", description: "Ready for review" },
  ];

  return (
    <div ref={ref} className="flex justify-between">
      {steps.map((step, index) => (
        <motion.div
          key={index}
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ delay: index * 0.2 }}
          className="flex flex-col items-center"
        >
          <div className="w-24 h-24">
            <DotLottieReact
              src={STEP_ANIMATIONS[step.animation]}
              loop
              autoplay={isInView}
            />
          </div>
          <p className="font-semibold mt-4">{step.label}</p>
          <p className="text-sm text-muted-foreground">{step.description}</p>
        </motion.div>
      ))}
    </div>
  );
}

Icon Animations

Use Lottie for animated icons:

"use client";

import { DotLottieReact } from "@lottiefiles/dotlottie-react";

const ANIMATED_ICONS = {
  check: "https://lottie.host/xxx/check.lottie",
  loading: "https://lottie.host/xxx/loading.lottie",
  error: "https://lottie.host/xxx/error.lottie",
  arrow: "https://lottie.host/xxx/arrow.lottie",
};

interface AnimatedIconProps {
  icon: keyof typeof ANIMATED_ICONS;
  size?: number;
  loop?: boolean;
}

export function AnimatedIcon({ icon, size = 24, loop = false }: AnimatedIconProps) {
  return (
    <DotLottieReact
      src={ANIMATED_ICONS[icon]}
      loop={loop}
      autoplay
      style={{ width: size, height: size }}
    />
  );
}

Creating Custom Animations

Option 1: LottieFiles Creator (Browser-based)

https://lottiefiles.com/lottie-creator

Option 2: Figma + LottieFiles Plugin

1. Design in Figma
2. Use LottieFiles Figma plugin to export

Option 3: Adobe After Effects + Bodymovin

1. Create animation in After Effects
2. Export with Bodymovin extension

Troubleshooting

Animation Not Playing

• Check if autoplay is set to true
• Verify the src URL is correct and accessible
• Check browser console for errors

Animation Too Large

• Use .lottie format instead of .json
• Optimize using LottieFiles editor
• Reduce animation complexity

Flash of Unstyled Content

• Add a placeholder/skeleton while loading
• Use dynamic import with loading state

SSR Issues

• Use dynamic import with ssr: false
• Or conditionally render based on client-side check

API Reference

DotLottieReact Props

DotLottie Instance Methods

Resources

• LottieFiles: https://lottiefiles.com
• Free Animations: https://lottiefiles.com/free-animations
• Documentation: https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-react
• Lottie Creator: https://lottiefiles.com/lottie-creator
• Figma Plugin: https://www.figma.com/community/plugin/809860933081065308