Panky Lottie Files (Joomla 6)

Lottie and dotLottie animations for Joomla 6. Browse animations at https://lottiefiles.com.

The package contains:

Extension	What it does
Module – Panky Lottie Animation	One or more animations in a module position, as a stack, grid or slider. Live preview while editing.
Content plugin – Panky Lottie	Turns {lottie src="images/animation.lottie"} in articles into an animation.
Editor button – Lottie	Inserts a {lottie} tag from a small dialog.

Requirements

• Joomla 6.0 or later
• PHP 8.3 or later

Version 2.x does not install on Joomla 4 or 5; use 1.x there. Updating from 1.x converts existing module settings automatically.

Features

• .lottie and .json files, from the Media Manager or any URL
• Play automatically, when scrolled into view, on hover (stop, pause or reverse on leave), on click, or linked to page scroll
• Frame ranges, named markers and .lottie themes
• Play/pause button, alternative text or decorative mode, and prefers-reduced-motion support
• Responsive sizing with an aspect ratio and fit options
• Optional link around each animation
• The player (dotlottie-wc, about 85 KB plus a 1.2 MB WASM engine) loads only when an animation nears the viewport, and is served from your own site, with no CDN requests

Media Manager setup

To pick .lottie and .json files in the Media Manager, open System → Media → Options and add:

• json,lottie to Legal Extensions and Legal Document Extensions
• application/json,application/zip to Legal MIME Types

URLs work without this. For the best performance, make sure the server sends .wasm files as application/wasm (it still works otherwise, just slower).

Content plugin syntax

{lottie src="images/hello.lottie" alt="Waving hand" trigger="viewport" loop="1"}

Optional attributes: trigger (autoplay, viewport, hover, click, scroll), hover-out (stop, pause, reverse), loop, controls, reduced-motion, decorative (1/0), speed, mode (forward, reverse, bounce, reverse-bounce), width, height, ratio (e.g. 16/9), fit (contain, cover, fill, fit-width, fit-height, none), background (#RRGGBB), segment (e.g. 10-60), marker, theme, link, target (_blank). Write a double quote inside a value as ".

Template overrides

• Module wrapper: templates/<template>/html/mod_pankylottiefiles/default.php
• Single player, used by the module and the plugin: templates/<template>/html/layouts/pankylottie/player.php

Structure

pkg_pankylottie.xml              Package manifest (update server, child uninstall blocked)
script.php                       Package installer: Joomla/PHP checks, enables the plugins
build.ps1                        Builds dist/pkg_pankylottie-<version>.zip and update.xml
update.xml                       Update server manifest (generated by build.ps1)
language/                        Package strings
mod_pankylottiefiles/
  script.php                     1.x settings migration
  services/provider.php
  src/Dispatcher/Dispatcher.php
  src/Helper/PlayerHelper.php    Option validation and rendering, shared with the plugin
  src/Field/LottiepreviewField.php
  layouts/pankylottie/player.php
  tmpl/default.php
  media/                         Installed to media/mod_pankylottiefiles
    js/pankylottie.js            Lazy loading, triggers, controls
    js/pankylottie-preview.js    Module editor preview
    js/pankylottie-editor-button.js
    js/dotlottie-wc.js           @lottiefiles/dotlottie-wc 0.9.28 (MIT)
    js/dotlottie-player.wasm     @lottiefiles/dotlottie-web 0.80.0 (MIT)
plg_content_pankylottie/
plg_editors-xtd_pankylottie/