Intro
Play Lottie animations in toddle
dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and use the file extension of ".lottie".
Demo
Components
dotlotte-player
dotlottie-player is a simple component for playing lottie animations
Attributes
Name Type Description src textREQUIRED Url to the .lottie file autoplay boolean Start playing immidiately loop boolean Loop the animation count number Number of loops the animation should play before stopping hover boolean Play on mouse over speed number Playback speed. 1.0 is normal speed playmode "normal" or "bounce" Play normal or bounce animation direction 1 or -1 Set the direction of animation intermission number Pause for n millliseconds between each loop of the animation. Events
Name Description ready Animation is ready to play complete Animation is done playing pause Animation paused loopComplete Animation is completed a loop stop Animation stopped freeze Animation is frozen frame Animation entered a new frame error An animation source cannot be parsed, fails to load, or has format errors
Style variables
The following style variables can be used to customize the styling of the player.
Add these to your project theme or as component style variables to override the default values.
| dotlottie-player-toolbar-height | Toolbar height |
| dotlottie-player-toolbar-background-color | Toolbar background color |
| dotlottie-player-toolbar-icon-color | Toolbar icon color |
| dotlottie-player-toolbar-icon-hover-color | Toolbar icon hover color |
| dotlottie-player-toolbar-icon-active-color | Toolbar icon active color |
| dotlottie-player-seeker-track-color | Seeker track color |
| dotlottie-player-seeker-thumb-color | Seeker thumb color |