croqo/lottie-plugin

Lottie player: Lightweight, lossless scalable animations for your website

v3.0.0-alpha-2 2023-10-03 10:42 UTC

Requires

• composer/installers: ~1.0

MIT

README

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' %}}