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

bash
1npm 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:

tsx
1"use client";
2
3import { DotLottieReact } from "@lottiefiles/dotlottie-react";
4
5interface LottieAnimationProps {
6  src: string;
7  loop?: boolean;
8  autoplay?: boolean;
9  className?: string;
10  speed?: number;
11}
12
13export function LottieAnimation({
14  src,
15  loop = true,
16  autoplay = true,
17  className = "",
18  speed = 1,
19}: LottieAnimationProps) {
20  return (
21    <DotLottieReact
22      src={src}
23      loop={loop}
24      autoplay={autoplay}
25      className={className}
26      speed={speed}
27    />
28  );
29}

Usage Example

tsx
1import { LottieAnimation } from "@/components/lottie-animation";
2
3export function MyComponent() {
4  return (
5    <LottieAnimation
6      src="https://lottie.host/xxx/animation.lottie"
7      className="w-64 h-64"
8    />
9  );
10}

Integration with Framer Motion

Combine Lottie with Framer Motion for scroll-triggered animations:

tsx
1"use client";
2
3import { motion, useInView } from "framer-motion";
4import { useRef, useState, useEffect } from "react";
5import { DotLottieReact, DotLottie } from "@lottiefiles/dotlottie-react";
6
7interface AnimatedLottieProps {
8  src: string;
9  className?: string;
10  playOnView?: boolean;
11}
12
13export function AnimatedLottie({
14  src,
15  className = "",
16  playOnView = true,
17}: AnimatedLottieProps) {
18  const ref = useRef(null);
19  const isInView = useInView(ref, { once: true, amount: 0.3 });
20  const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);
21
22  useEffect(() => {
23    if (playOnView && dotLottie) {
24      if (isInView) {
25        dotLottie.play();
26      } else {
27        dotLottie.pause();
28      }
29    }
30  }, [isInView, dotLottie, playOnView]);
31
32  return (
33    <motion.div
34      ref={ref}
35      initial={{ opacity: 0, y: 20 }}
36      animate={isInView ? { opacity: 1, y: 0 } : {}}
37      transition={{ duration: 0.6 }}
38      className={className}
39    >
40      <DotLottieReact
41        src={src}
42        loop
43        autoplay={!playOnView}
44        dotLottieRefCallback={setDotLottie}
45      />
46    </motion.div>
47  );
48}

Local Animation Files

Storing Animations

Store Lottie files in public/animations/:

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

Using Local Files

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

Controlled Playback

Play/Pause/Stop Controls

tsx
1"use client";
2
3import { useState, useCallback } from "react";
4import { DotLottieReact, DotLottie } from "@lottiefiles/dotlottie-react";
5
6export function ControlledLottie({ src }: { src: string }) {
7  const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);
8
9  const play = useCallback(() => dotLottie?.play(), [dotLottie]);
10  const pause = useCallback(() => dotLottie?.pause(), [dotLottie]);
11  const stop = useCallback(() => dotLottie?.stop(), [dotLottie]);
12
13  return (
14    <div>
15      <DotLottieReact
16        src={src}
17        loop
18        autoplay={false}
19        dotLottieRefCallback={setDotLottie}
20      />
21      <div className="flex gap-2 mt-4">
22        <button onClick={play}>Play</button>
23        <button onClick={pause}>Pause</button>
24        <button onClick={stop}>Stop</button>
25      </div>
26    </div>
27  );
28}

Segment Playback (Play Specific Frames)

tsx
1const playSegment = useCallback(() => {
2  if (dotLottie) {
3    dotLottie.setSegment(0, 30); // Play frames 0-30
4    dotLottie.play();
5  }
6}, [dotLottie]);

Event Handlers

tsx
1<DotLottieReact
2  src={src}
3  loop
4  autoplay
5  dotLottieRefCallback={setDotLottie}
6  onComplete={() => console.log("Animation complete")}
7  onLoad={() => console.log("Animation loaded")}
8  onPlay={() => console.log("Playing")}
9  onPause={() => console.log("Paused")}
10  onStop={() => console.log("Stopped")}
11  onFrame={(frame) => console.log("Frame:", frame)}
12/>

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:

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

Replacing Framer Motion Animations

Before (Framer Motion custom animation)

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

After (Lottie)

tsx
1<LottieAnimation
2  src="/animations/pulse.lottie"
3  className="w-8 h-8"
4/>

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

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

Workflow Animation Example

Replace custom step animations with Lottie:

tsx
1"use client";
2
3import { motion, useInView } from "framer-motion";
4import { useRef } from "react";
5import { DotLottieReact } from "@lottiefiles/dotlottie-react";
6
7const STEP_ANIMATIONS = {
8  document: "https://lottie.host/xxx/document.lottie",
9  ai: "https://lottie.host/xxx/ai-brain.lottie",
10  typing: "https://lottie.host/xxx/typing.lottie",
11  success: "https://lottie.host/xxx/checkmark.lottie",
12};
13
14interface WorkflowStep {
15  animation: keyof typeof STEP_ANIMATIONS;
16  label: string;
17  description: string;
18}
19
20export function LottieWorkflowAnimation() {
21  const ref = useRef(null);
22  const isInView = useInView(ref, { once: true, amount: 0.3 });
23
24  const steps: WorkflowStep[] = [
25    { animation: "document", label: "PDF Arrives", description: "Invoice received" },
26    { animation: "ai", label: "AI Reads", description: "Extracts data" },
27    { animation: "typing", label: "Enters Data", description: "Types into SAP" },
28    { animation: "success", label: "Done", description: "Ready for review" },
29  ];
30
31  return (
32    <div ref={ref} className="flex justify-between">
33      {steps.map((step, index) => (
34        <motion.div
35          key={index}
36          initial={{ opacity: 0, y: 20 }}
37          animate={isInView ? { opacity: 1, y: 0 } : {}}
38          transition={{ delay: index * 0.2 }}
39          className="flex flex-col items-center"
40        >
41          <div className="w-24 h-24">
42            <DotLottieReact
43              src={STEP_ANIMATIONS[step.animation]}
44              loop
45              autoplay={isInView}
46            />
47          </div>
48          <p className="font-semibold mt-4">{step.label}</p>
49          <p className="text-sm text-muted-foreground">{step.description}</p>
50        </motion.div>
51      ))}
52    </div>
53  );
54}

Icon Animations

Use Lottie for animated icons:

tsx
1"use client";
2
3import { DotLottieReact } from "@lottiefiles/dotlottie-react";
4
5const ANIMATED_ICONS = {
6  check: "https://lottie.host/xxx/check.lottie",
7  loading: "https://lottie.host/xxx/loading.lottie",
8  error: "https://lottie.host/xxx/error.lottie",
9  arrow: "https://lottie.host/xxx/arrow.lottie",
10};
11
12interface AnimatedIconProps {
13  icon: keyof typeof ANIMATED_ICONS;
14  size?: number;
15  loop?: boolean;
16}
17
18export function AnimatedIcon({ icon, size = 24, loop = false }: AnimatedIconProps) {
19  return (
20    <DotLottieReact
21      src={ANIMATED_ICONS[icon]}
22      loop={loop}
23      autoplay
24      style={{ width: size, height: size }}
25    />
26  );
27}

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