A very simple Svetle wrapper around `lottie-web`, made with TypeScript.
npm install lottie-sveltelottie-web, made with TypeScript.
lottie-web API if you need it.
html
`
https://stackblitz.com/edit/vitejs-vite-59zcbv?file=src/App.svelte
Example #2:
Common properties available via props.
`html
path="./love.json"
autoplay={true}
loop={false}
speed={0.2}
direction={Direction.REVERSE}
/>
`
https://stackblitz.com/edit/vitejs-vite-wtauwm?file=src/App.svelte
Lottie component props:
| Prop | type | required | description |
| --- | --- | --- | --- |
| path | string | ✅ | The path to the lottie file, relative to the static directory. E.g. for a lottie file located at static/lottie/heart.json, you would pass in ./lottie/heart.json to this prop. |
| loop | boolean | ⏩ | Whether the lottie should loop when it finishes. Default true. |
| autoplay | boolean | ⏩ | Whether the lottie should autoplay once it loads. Default true. |
| speed | number | ⏩ | Default 1. The speed that the animation should play. Float, 2 is 2x, 0.5 is half speed etc. |
| direction | Direction | ⏩ | Whether the animation plays FORWARD or in REVERSE. Default is FORWARD. Use the Direction enum in iface. FORWARD = 1, REVERSE = -1. |
| name | string | ⏩ | Sometimes required by the underlying lottie-web functions. You may need to set this if you are calling underlying certain methods on the AnimationItem |
| renderer | RendererType | ⏩ | How the lottie is rendered, one of 'svg' 'canvas' 'html'. Default is 'svg' |
| container | HTMLElement | ⏩ | Under normal circumstances don't use this prop. A reference to an element where the lottie will be created. If left blank lottie-svelte will create one for you. |
Programmatically control animation:
In addition to setting initial speed, direction etc. We provide a convenient event that fires once the lottie animation has loaded on:animation.
From this event you can get the underlying animation and control its speed, direction, frame and much more programatically.
You can find the supported AnimationItem methods here
`html
``