Enhanced Lottie

ruucm .

Enhanced Lottie

Fully Controllable lottie-web component using Framer X Properties.

Properties

Property Name Type Description
lottieJsonURL File Url for Lottie data
speed Number Speed of the animation (max x10)
percentage Number Current Frame percentage of the animation
playState String State of the animation (pause, stop, start)
direction String Direction of the animation (normal, reverse)
loop Boolean Looping (true, false)
segmentStart, segmentEnd Number segment controls
onComplete, onLoopComplete, onEnterFrame, onSegmentStart Function eventListeners

Notes

If you want to change frame dynamically, please make playState as stop first

Example of Usage - Enhanced Lottie - Example

Example of Usage 2 - Enhanced Lottie - Frame by Frame

Contribute this repository

https://github.com/ruucm/enhanced-lottie

Contact

Tweet @ruucm

Issues Here