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 text REQUIRED 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