div.animate({ opacity: 0 }).duration(500) ease-in-out summon the spirits of CSS keyframes!

const animation = lottie.loadAnimation({
  container: document.getElementById('animation'),
  path: 'animation.json', 
  renderer: 'svg', 
  loop: true, 
  autoplay: true
});

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    }
  ]
}

{"v":"4.8.0",
  "meta":{
    "g":"LottieFiles AE 3.3.6","a":"","k":"","d":"","tc":""},
      	"fr":60,"ip":0,"op":61,"w":512,"h":512,"nm":"Dog_sticker",
          "ddd":0,"assets":[{"id":"comp_0","layers":[{
            "ddd":0,"ind":1,"ty":4,"nm":"Ear Outlines 2",
            "sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},
            "r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},
            "o":{"x":[0.333],"y":[0]},"t":0,"s":[0]}
...

<script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script>

<dotlottie-player src="https://lottie.host/9ab36fa8-c6af-4ef3-bf61-b92136d8f20c/cxAucxcCsA.lottie" background="transparent" speed="1" style="width: 300px; height: 300px" loop autoplay>
</dotlottie-player>

const animation = lottie.loadAnimation({
  container: document.getElementById('animation'),
  path: 'animation.json', 
  renderer: 'svg', 
  loop: true, 
  autoplay: true
});

// Define themes in dotLottie
{
  "themes": {
    "light": {
      "bg": "#FFFFFF",
      "primary": "#2196F3",
      "accent": "#FF4081"
    },
    "dark": {
      "bg": "#121212",
      "primary": "#90CAF9",
      "accent": "#FF80AB"
    }
  }
}

// Apply themes at runtime
dotLottie.setTheme('dark');

// Dynamic theme updates
dotLottie.updateTheme('custom', {
  bg: '#000000',
  primary: '#FFFFFF',
  accent: '#00FF00'
});

// Define states and transitions
const stateMachine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        HOVER: 'hover',
        CLICK: 'active'
      },
      animation: 'idle.lottie'
    },
    hover: {
      on: {
        MOUSELEAVE: 'idle',
        CLICK: 'active'
      },
      animation: 'hover.lottie'
    },
    active: {
      on: {
        COMPLETE: 'success',
        ERROR: 'error'
      },
      animation: 'active.lottie'
    }
  }
}

// Initialize with state machine
dotLottie.useStateMachine(stateMachine);

// Trigger state changes
dotLottie.send('HOVER');

// Runtime color modifications
dotLottie.updateColor({
  fromColor: '#FF0000',
  toColor: '#00FF00'
});

// Dynamic property updates
dotLottie.updateProperties({
  scale: 1.5,
  rotation: 45,
  opacity: 0.8
});

// Runtime animation speed
dotLottie.setSpeed(2);

// Segment playback
dotLottie.playSegments([10, 20], true);