← Back to All Demos

Lottie Player

Play Lottie animations with scroll/hover/click triggers.

5
Variations
4
Triggers
0
Dependencies
01

Variation 01

Autoplay Loop

Continuous autoplay with looping enabled.

trigger=autoplay
loop=yes
speed=1
direction=forward
02

Variation 02

Scroll Trigger

Plays when scrolled into viewport.

trigger=scroll
loop=no
speed=1
direction=forward
03

Variation 03

Hover Trigger

Plays on hover, pauses when mouse leaves.

trigger=hover
loop=yes
speed=1
direction=forward
04

Variation 04

Click Trigger

Plays only when clicked.

trigger=click
loop=no
speed=1
direction=forward
05

Variation 05

Reverse Direction

Autoplay in reverse at 1.5x speed.

trigger=autoplay
loop=yes
speed=1.5
direction=reverse

All Variations

01
Autoplay Loop
triggerautoplay
loopyes
directionforward
02
Scroll Trigger
triggerscroll
loopno
directionforward
03
Hover Trigger
triggerhover
loopyes
directionforward
04
Click Trigger
triggerclick
loopno
directionforward
05
Reverse Direction
triggerautoplay
speed1.5
directionreverse

All Available Options

Source
URLMedia Library
Trigger
AutoplayViewportScrollHoverClick
Loop / Direction
Loop: YesLoop: NoDirection: ForwardDirection: Reverse
Renderer
SVGCanvas
Other Controls
SpeedLoop CountViewport OffsetLazy Load (Yes / No)