Lottie

This October CMS plugin allows to add Lottie animations on your website with ease.

🤔 What is Lottie? @lottiefiles.com

Component Player

Use this code in INI section to inject JS player into current page/partial/layout.

[lottie]

When it's done, you can use Lottie player as many times as you want with different values of url property.

• url

  HTTP link to lottie animation json.

  Next example code will generate two animations following one-by-one:

  {% component 'lottie' url='https://path.to/file1.json' %}
  
  {% component 'lottie' url='https://path.to/file2.json' %}

• look

  Lottie player CSS preset

  {% component 'lottie' url='https://path.to/file1.json' look='image' %}}
  
  {% component 'lottie' url='https://path.to/file2.json' look='wallpaper' %}}

• aspect ratio

  preserveAspectRatio option (rendererSettings)

  {% component 'lottie' url='https://path.to/file1.json' ratio='xMidYMid slice' %}}    
  
  {% component 'lottie' url='https://path.to/file2.json' ratio='xMidYMid meet' %}}