Lottie is a lightweight JavaScript library for rendering animations created in Adobe After Effects and exported as JSON. These animations are scalable, high-performance, and ideal for modern websites. The Greyd Plugin integrates Lottie to make adding such SVG animations easy and flexible. More details and free animations can be found at lottiefiles.com.
Activating the feature
To use Lottie in the Greyd Plugin, activate the feature under Greyd.Suite → Features in the backend. Locate the feature titled Lottie, enable the toggle, and save the settings. Once activated, you can access global settings and use the feature in various blocks.
Settings
After activation, you’ll find a new Lottie section under Greyd.Suite → Settings. This section allows you to control how the Lottie script is loaded on your site. You have three options:
- Include Lottie normally: The library is included in the frontend as usual.
- Delayed loading of Lottie (recommended): The script loads only after the page is fully rendered. This can significantly improve performance, especially on pages with animations outside the initial viewport.
- Disable Lottie: The library is not loaded at all, and no animations will run.
If you use animations in visible areas like the hero section, delayed loading may affect how fast they appear.
Lottie block
To insert a Lottie animation into a post or page, open the block editor and search for Animation. The block description is Include a Lottie JSON-Animation. Once added, you’ll see a placeholder prompting you to upload a Lottie JSON file. You can choose a file from your Media Library or upload a new one. Valid JSON files must follow the format defined at lottiefiles.com.
Once uploaded, a preview appears directly in the editor. The block’s settings appear in the sidebar. In the block toolbar, only the alignment setting is available with the following options: none, wide with, full width, align left, align center, align right.
Settings Tab
In the General section, you can replace or remove the animation. Below that, you’ll find the SVG animation options:
- Start automatically
- Start on hover
- Start as soon as visible
- Sync with scroll
- Sync with cursor position
- Sync with horizontal cursor position
- Toggle animation
- Play animation on click
Each option defines when and how the animation should begin or interact with user input. You can also set a custom width for the animation.
In the Link section, you can make the entire animation clickable by adding an URL.
Using Lottie as background
Lottie files are also supported by various blocks and can be used as a background. See the individual blocks documentation for more details: