Lottie

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: 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:

{LOTTIE (src="tiki-download_file.php?fileId=123" loop="true" autoplay="true" speed="1.5" width="400px" height="400px" background="transparent") }

Or a simplified version:

{LOTTIE src="tiki-download_file.php?fileId=123"}

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:

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. @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

• Larger unpacked size (~6.6MB)
• More features than strictly necessary for basic use

• 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)

Related

• Animations
• Diagram
• Sequence Diagram