Interactive Lottie Files

Lottie files can be integrated easily by embedding them with the lottie player.

But they also have a nice JS API that we can use in Antetype to control the animations.

Link the library in the header_include. In Antetype open the header_include file. Go to the menu Plugins and select “Edit header_include in Visual Studio Code” (be sure to install Code first ;-)).

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

Now create a cell and add a script action to it in which you load the lottie animation.

let cell = targetCells[0]
let lot = cell.DOMElement

lottie.loadAnimation({
  container: lot, 
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://assets10.lottiefiles.com/private_files/lf30_1KyL2Q.json', 
});

You can now use the methods like lottie.play().

lottie.zip (388.2 KB)

More info here: Lottie Docs

2 Likes