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-12-04 09:20:43 +05:30
parent bdfff3b643
commit 8414c1079b
Failed to extract signature
1 changed files with 52 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
src/components/Lottie/Lottie.mdx
View file

@ -11,16 +11,28 @@ The `Lottie` component uses the [dotLottie-web](https://developers.lottiefiles.c
## How to prepare Lottie files ## How to prepare Lottie files
[LottieFiles](https://lottiefiles.com/) is the official platform for creating and editing Lottie animations. 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 Lottie animations as JSON files. [LottieFiles](https://lottiefiles.com/) is the official platform for creating and editing Lottie animations. 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 Lottie animations as JSON files.
[dotLottie](https://dotlottie.io/) is another common format for Lottie files. This format bundles the Lottie JSON file and any associated assets, such as images and fonts, into a single compressed file with the extension `.lottie`. [dotLottie](https://dotlottie.io/) is another common format for Lottie files. This format bundles the Lottie JSON file and any associated assets, such as images and fonts, into a single compressed file with the extension `.lottie`.
This `Lottie` component is flexible and supports both `dotLottie` and JSON Lottie files. For best performance it is recommended that you convert your Lottie JSON file into a `.zip` file by following these steps: This `Lottie` component is flexible and supports both `dotLottie` and JSON Lottie files. For best performance it is recommended that you convert your Lottie JSON file into a `.zip` file by following these steps:
1. Export your Lottie animation as a JSON file using [Bodymovin](https://exchange.adobe.com/apps/cc/12557/bodymovin) or another Lottie exporter. 1. Export your Lottie animation as a JSON file using [Bodymovin](https://exchange.adobe.com/apps/cc/12557/bodymovin) or another Lottie exporter.
2. Use the [LottieFiles converter](https://lottiefiles.com/tools/lottie-to-dotlottie) to convert the JSON file into a `.lottie` file. 2. Use the [LottieFiles converter](https://lottiefiles.com/tools/lottie-to-dotlottie) to convert the JSON file into a `.lottie` file.
3. Change the file extension to `.zip` from `.lottie`. This ensures full compatibility with the Reuters graphics publisher while maintaining the benefits of dotLottie format's compression and optimisation. 3. Change the file extension to `.zip` from `.lottie`. This ensures full compatibility with the Reuters graphics publisher while maintaining the benefits of dotLottie format's compression and optimisation.
## When not to use Lottie
Lottie animations are great for lightweight, scalable animations. However, they may not be suitable for all use cases. Consider the following before using Lottie:
- **Huge raster images**: Lottie is best suited for simple to moderately complex animations. Animations with large raster images may not render well or could lead to performance issues. In such cases, consider using a [Video](?path=/docs/components-multimedia-video--docs) component or a [ScrollerVideo](?path=/docs/components-graphics-scrollervideo--docs) component instead.
- **Complex effects**: Some advanced effects and features available in After Effects may not be fully supported in Lottie, which could lead to discrepancies between the original design and the rendered animation. Check the [Lottie documentation](https://lottiefiles.com/supported-features) for a list of supported features.
- **Text rendering**: Lottie renders text as vector shapes. If you need DOM text for accessibility or CSS manipulation, consider using HTML/CSS animations instead.
- **SVG DOM manipulation**: Lottie renders animations on a canvas. If you need to manipulate individual elements of the animation using JavaScript or CSS, consider using SVG animations instead.
## Basic demo ## Basic demo
To use the `Lottie` component, import it and provide the Lottie animation source. The height of the container defaults to `100lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `200lvh` with the `height` prop. To use the `Lottie` component, import it and provide the Lottie animation source. The height of the container defaults to `100lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `200lvh` with the `height` prop.
@ -33,7 +45,6 @@ If importing the Lottie file directly into a Svelte component, make sure to appe
[Demo](?path=/story/components-graphics-scrollerlottie--demo) [Demo](?path=/story/components-graphics-scrollerlottie--demo)
```svelte ```svelte
<script lang="ts"> <script lang="ts">
import { Lottie } from '@reuters-graphics/graphics-components'; import { Lottie } from '@reuters-graphics/graphics-components';
@ -90,7 +101,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
## Playing a segment ## Playing a segment
The `Lottie` component can play a specific segment of the Lottie animation using the `segment` prop. The `segment` prop expects an array of two numbers representing the start and end frames of the segment. The `Lottie` component can play a specific segment of the Lottie animation using the `segment` prop. The `segment` prop expects an array of two numbers representing the start and end frames of the segment.
[Demo](?path=/story/components-graphics-scrollerlottie--segment) [Demo](?path=/story/components-graphics-scrollerlottie--segment)
@ -142,7 +153,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
## Markers ## Markers
The `Lottie` component can also play a specific portion of the Lottie animation using markers set in [AfterEffects](https://helpx.adobe.com/in/after-effects/using/layer-markers-composition-markers.html). The `Lottie` component can also play a specific portion of the Lottie animation using markers set in [AfterEffects](https://helpx.adobe.com/in/after-effects/using/layer-markers-composition-markers.html).
The list of available markers, which can be passed into the `marker` prop, can be found in the debug info box that appears when `showDebugInfo` is set to `true`. The list of available markers, which can be passed into the `marker` prop, can be found in the debug info box that appears when `showDebugInfo` is set to `true`.
@ -160,8 +171,7 @@ When setting markers in AfterEffects, ensure that the **Comment** section of the
import MyLottie from './lottie/my-lottie.zip?url'; // Append **?url** to the file path import MyLottie from './lottie/my-lottie.zip?url'; // Append **?url** to the file path
</script> </script>
<Lottie src={MyLottie} marker="myMarker" <Lottie src={MyLottie} marker="myMarker" />
/>
``` ```
## Switching themes ## Switching themes
@ -210,7 +220,7 @@ The `Lottie` component can be used with the `ScrollerBase` component to create a
<ScrollerBase bind:progress query="div.step-foreground-container"> <ScrollerBase bind:progress query="div.step-foreground-container">
{#snippet backgroundSnippet()} {#snippet backgroundSnippet()}
<!-- Pass bindable prop `progress` as `progress` --> <!-- Pass bindable prop `progress` as `progress` -->
<Lottie src={MyLottie} {progress} showDebugInfo /> <Lottie src={MyLottie} {progress} showDebugInfo />
{/snippet} {/snippet}
{#snippet foregroundSnippet()} {#snippet foregroundSnippet()}
<div class="step-foreground-container"> <div class="step-foreground-container">
@ -251,38 +261,39 @@ The `Lottie` component can also be used with the `LottieForeground` component to
import MyLottie from './lottie/my-lottie.zip?url'; import MyLottie from './lottie/my-lottie.zip?url';
</script> </script>
<Lottie src={MyLottie} autoplay > <Lottie src={MyLottie} autoplay>
<!-- Foreground 1: Headline component as foreground -->
<!-- Foreground 1: Headline component as foreground --> <LottieForeground
<LottieForeground startFrame={0}
startFrame={0} endFrame={50}
endFrame={50} position="center center"
position="center center" backgroundColour="rgba(0, 0, 0)"
backgroundColour="rgba(0, 0, 0)" >
> <div class="headline-container">
<div class="headline-container"> <Theme base="dark">
<Theme base="dark"> <Headline
<Headline hed="Headline"
hed="Headline" dek="This is an example of using a Svelte component as the foreground."
dek="This is an example of using a Svelte component as the foreground." authors={['Jane Doe', 'John Doe']}
authors={['Jane Doe', 'John Doe']} />
/> </Theme>
</Theme> </div>
</div> </LottieForeground>
</LottieForeground>
<!-- Foreground 2: Text only --> <!-- Foreground 2: Text only -->
<LottieForeground <LottieForeground
startFrame={50} startFrame={50}
endFrame={100} endFrame={100}
text="Foreground caption between frames 50 and 100." text="Foreground caption between frames 50 and 100."
position="bottom center" position="bottom center"
backgroundColour="rgba(0, 0, 0)" backgroundColour="rgba(0, 0, 0)"
width="wide" width="wide"
/> />
</Lottie> </Lottie>
``` ```
### Using with ArchieML ### Using with ArchieML
With the graphics kit, you'll likely get your text and prop values from an ArchieML doc... With the graphics kit, you'll likely get your text and prop values from an ArchieML doc...
```yaml ```yaml
@ -315,8 +326,8 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
{} {}
# Foreground 2: Text only # Foreground 2: Text only
startFrame: 50 startFrame: 50
endFrame: 100 endFrame: 100
# Set foreground type # Set foreground type
type: text type: text
@ -339,7 +350,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
} from '@reuters-graphics/graphics-components'; } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; import { assets } from '$app/paths';
// Make an object of components to use as foregrounds // Make an object of components to use as foregrounds
const Components = $state({ const Components = $state({
Headline, Headline,
}); });
@ -348,7 +359,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
{#each content.blocks as block} {#each content.blocks as block}
<!-- Inside the content.blocks for loop... --> <!-- Inside the content.blocks for loop... -->
{#if block.type == 'lottie'} {#if block.type == 'lottie'}
<Lottie src={`${assets}/${block.src}`} > <Lottie src={`${assets}/${block.src}`}>
{#each block.foregrounds as foreground} {#each block.foregrounds as foreground}
{#if foreground.type == 'text'} {#if foreground.type == 'text'}
<LottieForeground <LottieForeground