Docs

Lottie

A lightweight vector animation from a Lottie file.

On this page

The Lottie widget plays a vector animation from a Lottie JSON file: an animated illustration, an icon that moves on hover, or a drawing that follows the scroll. Lottie files are small and stay sharp at any size. The animation can play on its own while it is on screen, on hover, on click, or with the scroll position.

An illustration of an arched window with a terracotta sun above a green hill, drawn by the Lottie widget
A Lottie animation: the sun rises and sets behind the hill.

Add a Lottie animation

  1. Get a Lottie file

    Export the animation from After Effects with the Bodymovin plugin, or download it from LottieFiles as Lottie JSON (a .json file).

  2. Insert the widget

    Open Insert in the left panel, find Lottie under Media (or type lottie in Search widgets) and click it or drag it onto the canvas.

  3. Choose the file

    Click the JSON file field and upload the file to the media library, or set Source to External URL and paste the address of a file on another site.

  4. Choose when it plays

    Set Play to Automatically (while visible), On hover, On click or With the scroll position, and adjust Loop and Speed.

Upload Lottie files

WordPress normally refuses .json uploads. Urmi lets users who can upload files add Lottie files to the media library, as long as the file really is a Lottie animation and is no larger than 5 MB. Files from another site need that site to allow cross-origin requests (CORS).

Settings

Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). The JSON URL and Link support dynamic tags (see Dynamic tags).

Content tab

Lottie
SettingWhat it does
SourceUse a Lottie file from the media library, or a file on another site. Options: Media library, External URL. Default: Media library.
JSON fileThe Lottie .json file. Upload it to the media library here: export it from After Effects with Bodymovin, or download it from LottieFiles as Lottie JSON. Files up to 5 MB that really are Lottie animations are accepted. Shown when Source is Media library.
JSON URLAddress of a Lottie .json file on another site. That site must allow cross-origin requests (CORS). Shown when Source is External URL. Supports dynamic tags.
PlayWhen the animation plays: on its own while it is on screen, on hover, on click, or following the scroll position. Options: Automatically (while visible), On hover, On click, With the scroll position. Default: Automatically (while visible).
LoopPlays the animation again and again. On by default. Shown when Play is not With the scroll position.
On mouse leaveWhat happens when the pointer leaves: play backwards, pause, jump back to the start, or keep playing. Options: Play backwards, Pause, Back to the start, Keep playing. Default: Play backwards. Shown when Play is On hover.
SpeedPlayback speed. 1 is normal, 2 is twice as fast, 0.5 half as fast. Default: 1.
Play backwardsPlays the animation from the end to the start. Shown when Play is not With the scroll position.
LinkMakes the animation a link. Supports dynamic tags.
Accessible labelDescribes the animation for screen readers. Leave empty when it is decorative.
AlignmentAligns the animation. Options: Left, Center, Right. Per device.

Design tab

Animation
SettingWhat it does
WidthWidth of the animation. The height follows its own proportions. Per device.
Max widthLargest width the animation may take. Per device.
OpacityOpacity of the animation, from 0 to 1.
Shared Design sections

Every element also has these sections at the end of the Design tab.

SectionWhat it does
Spacing & positionMargin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position.
Background & borderBackground, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows.
MaskCrops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks.

Behaviour tab

Behaviour sections

The Behaviour tab is the same for every element.

SectionWhat it does
Anchor & classesAn Anchor ID for #links and your own CSS classes.
AnimationsEntrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects.
Motion & effectsA simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning.
Scroll & mouse effectsMovement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt).
VisibilityHide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility.
ConditionsShow the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions.
InteractionsShow, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions.
AttributesCustom HTML attributes for this element. See Anchor, classes & attributes.

Tips

  • Describe or hide it. Fill in Accessible label when the animation carries meaning; leave it empty for decoration, and screen readers skip it.
  • Reduced motion. For visitors who prefer reduced motion, automatic, hover and scroll animations stay on their first frame. Animations started by a click still play. Make sure the first frame looks complete.
  • Battery friendly. Automatic animations only play while they are on screen.
  • Keep files small. Large animation files slow the page down; simplify or compress them before you upload.
Motion & effectsAnimate any element without a file. VideoYouTube, Vimeo or your own videos. IconStatic icons from the icon libraries. Text PathText on a curve that can spin.