History: Lottie
Source of version: 8 (current)
Copy to clipboard
!!!! What is Lottie?
Lottie is a modern way to add animations to websites and apps. It uses small JSON files to render high-quality, smooth animations that scale well on any screen size.
Unlike GIFs or videos, Lottie animations are lightweight and fast, making them perfect for online content.
More about Lottie: [https://lottiefiles.com/what-is-lottie|LottieFiles – What is Lottie?]
Why Add Lottie Support to Tiki?
Tiki is a powerful platform for creating and sharing content. By integrating Lottie, we can:
* Embed beautiful animations directly in wiki pages.
* Make tutorials, guides, and presentations more engaging.
* Add motion and energy to static pages.
* Use animations for branding (e.g. animated logos or mascots).
* Help users communicate ideas more clearly using visuals.
!!! How Would This Work in Tiki?
We propose a new wiki plugin: `{LOTTIE}`
This plugin allows users to embed Lottie animations by referencing a file from the File Gallery or an external source.
Example usage:
{CODE()}
{LOTTIE (src="tiki-download_file.php?fileId=123" loop="true" autoplay="true" speed="1.5" width="400px" height="400px" background="transparent") }
{CODE}
Or a simplified version:
{CODE(wrap="1")}
{LOTTIE src="tiki-download_file.php?fileId=123"}
{CODE}
The plugin renders a Lottie animation directly inside the wiki page.
!!! Which Technology We recommand to use?
We recommend using the official dotLottie Web player from LottieFiles:
[https://github.com/LottieFiles/dotlottie-web|GitHub – dotLottie Web Player]
This is a lightweight and modern Web Component that works on all browsers. It allows full control over animation playback and is actively maintained.
!!! Available options
1. [https://github.com/LottieFiles/dotlottie-web|@lottiefiles/dotlottie-web (Recommended)]
__Pros:__
* Official LottieFiles player - industry standard
* Supports both .json and .lottie formats
* Web Worker support - offloads rendering from main thread
* Web Component available for easy HTML integration
* Modern ES modules, actively maintained
__Cons:__
* Larger unpacked size (~6.6MB)
* More features than strictly necessary for basic use
2. [https://github.com/airbnb/lottie-web | lottie-web (Airbnb)]
__Pros:__
* Most used
* Smaller bundle for simple use cases
* Extensive documentation
__Cons:__
* JSON format only (no .lottie support)
* No Web Worker support (may block UI on complex animations)
https://lottiefiles.com/what-is-lottie
https://github.com/guidepilot/php-lottie
https://packagist.org/?query=lottie
!! Related
* ((Animations))
* ((Diagram))
* ((Sequence Diagram))