https://github.com/croqo/oc-lottie-plugin
October CMS plugin to play lottie animations for your visitors
https://github.com/croqo/oc-lottie-plugin
bodymovin javascript laravel lottie lottie-web october-cms octobercms octobercms-plugin php
Last synced: 22 days ago
JSON representation
October CMS plugin to play lottie animations for your visitors
- Host: GitHub
- URL: https://github.com/croqo/oc-lottie-plugin
- Owner: croqo
- License: other
- Created: 2020-05-30T21:55:32.000Z (almost 5 years ago)
- Default Branch: dev
- Last Pushed: 2023-11-15T07:38:45.000Z (over 1 year ago)
- Last Synced: 2024-12-16T00:11:04.709Z (4 months ago)
- Topics: bodymovin, javascript, laravel, lottie, lottie-web, october-cms, octobercms, octobercms-plugin, php
- Language: PHP
- Homepage:
- Size: 290 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Lottie
This __October CMS__ plugin allows to add Lottie animations on your website with ease.
🤔 [What is Lottie? @lottiefiles.com](https://lottiefiles.com/what-is-lottie)
## Component Player
Use this code in INI section to inject JS player into current page/partial/layout.
```ini
[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:
```twig
{% component 'lottie' url='https://path.to/file1.json' %}
{% component 'lottie' url='https://path.to/file2.json' %}
```
+ ### __look__
Lottie player CSS preset
```twig
{% 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)
```twig
{% component 'lottie' url='https://path.to/file1.json' ratio='xMidYMid slice' %}}
{% component 'lottie' url='https://path.to/file2.json' ratio='xMidYMid meet' %}}
```