wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs

Browse source
This commit is contained in:
Sudev Kiyada 2025-10-13 22:26:43 +05:30
parent f3375f02b1
commit a20a027d25
Failed to extract signature
1 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/ScrollerLottie/ScrollerLottie.mdx
View file

@ -13,6 +13,8 @@ The `ScrollerLottie` component plays Lottie animations. It uses the [dotLottie-w
LottieFiles is the official platform for creating and editing Lottie animations, and exporting them in the dotLottie format for smaller file sizes. The free version of LottieFiles has limited features, so [Bodymovin](https://exchange.adobe.com/apps/cc/12557/bodymovin) remains a popular, free way to export animations as JSON files. You can use the [LottieFiles converter](https://lottiefiles.com/tools/lottie-to-dotlottie) to convert JSON files to dotLottie or optimized dotLottie formats. This component is flexible and supports both dotLottie and JSON animation files.
> 🚧NOTE: For optimal compatibility with graphics-publisher, export your JSON files as optimized dotLottie format and rename the file extension to `*.zip`. This approach ensures full publisher support while maintaining the benefits of the dotLottie format's compression and optimization.
## Basic demo
To use the `ScrollerLottie` component, import it and provide the animation source. The height defaults to `100lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `200lvh` with the `height` prop.
@ -31,7 +33,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
# ArchieML doc
[blocks]
type: lottie
src: LottieFile.lottie
src: LottieFile.zip
:end
[]
```
@ -75,7 +77,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
# ArchieML doc
[blocks]
type: lottie
src: LottieFile.lottie
src: LottieFile.zip
marker: myMarker
:end
[]
@ -115,7 +117,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
# ArchieML doc
[blocks]
type: lottie
src: LottieFile.lottie
src: LottieFile.zip
[.segment]
start: 0
end: 20
@ -158,7 +160,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
# ArchieML doc
[blocks]
type: lottie
src: LottieFile.lottie
src: LottieFile.zip
theme: myTheme
:end
[]
@ -193,7 +195,9 @@ It is also possible to switch themes dynamically based on the `progress` prop by
```svelte
<script lang="ts">
import { ScrollerLottie } from '@reuters-graphics/graphics-components';
import LottieSrc from './data/lottie-example.lottie?url';
// make a folder named 'data' and place the .zip lottie file inside it
// append ?url to the import statement
import LottieSrc from './data/lottie-example.zip?url';
let progress = $state(0);
</script>
@ -216,7 +220,9 @@ The `ScrollerLottie` component can be used in conjunction with the `ScrollerBase
```svelte
<script lang="ts">
import { ScrollerLottie } from '@reuters-graphics/graphics-components';
import LottieSrc from './data/lottie-example.lottie?url';
// make a folder named 'data' and place the .zip lottie file inside it
// append ?url to the import statement
import LottieSrc from './data/lottie-example.zip?url';
// Pass `progress` as `videoPercentage` to ScrollerLottie
let progress = $state(0);
@ -278,7 +284,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
# ArchieML doc
[blocks]
type: lottie
src: LottieFile.lottie
src: LottieFile.zip
# Array of foregrounds
[.foregrounds]