updated docs
This commit is contained in:
MinamiFunakoshiTR
parent
675860a4b8
commit
4f2d8d996c
5 changed files with 163 additions and 183 deletions
|
|
@ -47,6 +47,8 @@ If importing the Lottie file directly into a Svelte component, make sure to appe
|
|||
|
||||
## Using with ArchieML
|
||||
|
||||
If you are using `Lottie` with ArchieML, store your Lottie zip file in the `src/statics/lottie/` folder.
|
||||
|
||||
With the graphics kit, you'll likely get your text and prop values from an ArchieML doc...
|
||||
|
||||
```yaml
|
||||
|
|
@ -98,12 +100,18 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
|
|||
# ArchieML doc
|
||||
[blocks]
|
||||
type: lottie
|
||||
src: LottieFile.zip
|
||||
showDebugInfo: true
|
||||
loop: true
|
||||
|
||||
# Optionally, set playback speed
|
||||
speed: 0.5
|
||||
|
||||
# Lottie file stored in `src/statics/lottie/` folder
|
||||
src: lottie/LottieFile.zip
|
||||
[.segment]
|
||||
start: 0
|
||||
end: 20
|
||||
[]
|
||||
:end
|
||||
[]
|
||||
```
|
||||
|
||||
|
|
@ -112,18 +120,21 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
|
|||
```svelte
|
||||
<script lang="ts">
|
||||
import { Lottie } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
// Graphics kit only
|
||||
import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
|
||||
import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
|
||||
</script>
|
||||
|
||||
{#each content.blocks as block}
|
||||
<!-- Inside the content.blocks for loop... -->
|
||||
{#if block.type == 'lottie'}
|
||||
<Lottie
|
||||
src={`${assets}/animations/${block.src}`}
|
||||
segment={[block.segment.start, block.segment.end]}
|
||||
autoplay
|
||||
loop
|
||||
showDebugInfo
|
||||
src={`${assets}/${block.src}`}
|
||||
segment={[parseInt(block.segment.start), parseInt(block.segment.end)]}
|
||||
showDebugInfo={truthy(block.showDebugInfo)}
|
||||
loop={truthy(block.loop)}
|
||||
speed={parseInt(block.speed)}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
|
@ -155,60 +166,25 @@ When setting markers in AfterEffects, ensure that the **Comment** section of the
|
|||
|
||||
## Switching themes
|
||||
|
||||
[Lottie Creator](https://lottiefiles.com/theming) allows you to define multiple color themes for your animation. You can switch between these themes using the `theme` prop.
|
||||
[Lottie Creator](https://lottiefiles.com/theming) allows you to define multiple colour themes for your animation. You can switch between these themes using the `theme` prop.
|
||||
|
||||
Available themes can be found in the debug info when `showDebugInfo` prop is enabled.
|
||||
Available themes can be found in the debug info when the `showDebugInfo` prop is set to `true`.
|
||||
|
||||
With the graphics kit, you'll likely get your text and prop values from an ArchieML doc...
|
||||
|
||||
```yaml
|
||||
# ArchieML doc
|
||||
[blocks]
|
||||
type: lottie
|
||||
src: LottieFile.zip
|
||||
theme: myTheme
|
||||
:end
|
||||
[]
|
||||
```
|
||||
|
||||
... which you'll parse out of a ArchieML block object before passing to the `Lottie` component.
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { Lottie } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
{#each content.blocks as block}
|
||||
<!-- Inside the content.blocks for loop... -->
|
||||
{#if block.type == 'lottie'}
|
||||
<Lottie
|
||||
src={`${assets}/animations/${block.src}`}
|
||||
theme={block.theme}
|
||||
autoplay
|
||||
loop
|
||||
showDebugInfo
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
```
|
||||
|
||||
It is also possible to switch themes dynamically based on the `progress` prop by binding a variable to it.
|
||||
You can set multiple themes and switch between them dynamically -- for example, based on the `progress` of the animation.
|
||||
|
||||
[Demo](?path=/story/components-graphics-scrollerlottie--themes)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { Lottie } from '@reuters-graphics/graphics-components';
|
||||
// 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';
|
||||
import MyLottie from './lottie/my-lottie.zip?url';
|
||||
|
||||
// Set a bindable `progress` variable to pass into `<Lottie />`
|
||||
let progress = $state(0);
|
||||
</script>
|
||||
|
||||
<Lottie
|
||||
src={LottieSrc}
|
||||
src={MyLottie}
|
||||
bind:progress
|
||||
themeId={progress < 0.33 ? 'water'
|
||||
: progress < 0.66 ? 'air'
|
||||
|
|
@ -218,16 +194,14 @@ It is also possible to switch themes dynamically based on the `progress` prop by
|
|||
/>
|
||||
```
|
||||
|
||||
## With ScrollerBase
|
||||
## Using with `ScrollerBase`
|
||||
|
||||
The `Lottie` component can be used in conjunction with the `ScrollerBase` component to create a more complex scrolling experience. The `ScrollerBase` component provides a scrollable container that can hold the `Lottie` component as a background.
|
||||
The `Lottie` component can be used with the `ScrollerBase` component to create a more complex scrolling experience. `ScrollerBase` provides a scrollable container sets the `Lottie` component as a background.
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { Lottie } from '@reuters-graphics/graphics-components';
|
||||
// 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';
|
||||
import { Lottie, ScrollerBase } from '@reuters-graphics/graphics-components';
|
||||
import MyLottie from './lottie/my-lottie.zip?url';
|
||||
|
||||
// Pass `progress` as `videoPercentage` to Lottie
|
||||
let progress = $state(0);
|
||||
|
|
@ -236,12 +210,9 @@ The `Lottie` component can be used in conjunction with the `ScrollerBase` compon
|
|||
<ScrollerBase bind:progress query="div.step-foreground-container">
|
||||
{#snippet backgroundSnippet()}
|
||||
<!-- Pass bindable prop `progress` as `progress` -->
|
||||
<div class="lottie-container">
|
||||
<Lottie src={LottieSrc} {progress} showDebugInfo />
|
||||
</div>
|
||||
<Lottie src={MyLottie} {progress} showDebugInfo />
|
||||
{/snippet}
|
||||
{#snippet foregroundSnippet()}
|
||||
<!-- Add custom foreground HTML or component -->
|
||||
<div class="step-foreground-container">
|
||||
<h3 class="text-center">Step 1</h3>
|
||||
</div>
|
||||
|
|
@ -255,23 +226,14 @@ The `Lottie` component can be used in conjunction with the `ScrollerBase` compon
|
|||
</ScrollerBase>
|
||||
|
||||
<style lang="scss">
|
||||
.lottie-container {
|
||||
width: 100%;
|
||||
height: 100lvh;
|
||||
}
|
||||
|
||||
.step-foreground-container {
|
||||
height: 100lvh;
|
||||
width: 50%;
|
||||
padding: 1em;
|
||||
margin: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: white;
|
||||
background-color: antiquewhite;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -279,41 +241,90 @@ The `Lottie` component can be used in conjunction with the `ScrollerBase` compon
|
|||
|
||||
## With foregrounds
|
||||
|
||||
The `Lottie` component can also be used to display captions or even components, such as `Headline` or ai2svelte files, as foregrounds at specific times in the animation. To do so, add LottieForeground components as children of the Lottie component.
|
||||
The `Lottie` component can also be used with the `LottieForeground` component to display foreground elements at specific times in the animation.
|
||||
|
||||
[Demo](?path=/story/components-graphics-scrollerlottie--with-foregrounds)
|
||||
[Demo](?path=/story/components-graphics-scrollerlottie--with-foregrounds).
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { Lottie, ScrollerBase } from '@reuters-graphics/graphics-components';
|
||||
import MyLottie from './lottie/my-lottie.zip?url';
|
||||
</script>
|
||||
|
||||
<Lottie src={MyLottie} autoplay >
|
||||
|
||||
<!-- Foreground 1: Headline component as foreground -->
|
||||
<LottieForeground
|
||||
startFrame={0}
|
||||
endFrame={50}
|
||||
position="center center"
|
||||
backgroundColour="rgba(0, 0, 0)"
|
||||
>
|
||||
<div class="headline-container">
|
||||
<Theme base="dark">
|
||||
<Headline
|
||||
hed="Headline"
|
||||
dek="This is an example of using a Svelte component as the foreground."
|
||||
authors={['Jane Doe', 'John Doe']}
|
||||
/>
|
||||
</Theme>
|
||||
</div>
|
||||
</LottieForeground>
|
||||
|
||||
<!-- Foreground 2: Text only -->
|
||||
<LottieForeground
|
||||
startFrame={50}
|
||||
endFrame={100}
|
||||
text="Foreground caption between frames 50 and 100."
|
||||
position="bottom center"
|
||||
backgroundColour="rgba(0, 0, 0)"
|
||||
width="wide"
|
||||
/>
|
||||
</Lottie>
|
||||
```
|
||||
### Using with ArchieML
|
||||
With the graphics kit, you'll likely get your text and prop values from an ArchieML doc...
|
||||
|
||||
```yaml
|
||||
# ArchieML doc
|
||||
[blocks]
|
||||
type: lottie
|
||||
src: LottieFile.zip
|
||||
|
||||
# Lottie file stored in `src/statics/lottie/` folder
|
||||
src: lottie/LottieFile.zip
|
||||
|
||||
# Array of foregrounds
|
||||
[.foregrounds]
|
||||
|
||||
# Foreground 1: Headline component
|
||||
startFrame: 0 # When in the animation to start showing the foreground
|
||||
endFrame: 50 # When to stop showing the foreground
|
||||
type: text
|
||||
{.foregroundProps}
|
||||
text: Some text for the foreground
|
||||
{}
|
||||
|
||||
startFrame: 50 # When in the animation to start showing the foreground
|
||||
endFrame: 100 # When to stop showing the foreground
|
||||
# Set foreground type
|
||||
type: component
|
||||
|
||||
# Set props to pass into `LottieForeground`
|
||||
{.foregroundProps}
|
||||
componentType: Headline
|
||||
hed: Some headline text
|
||||
componentName: Headline
|
||||
hed: Headline
|
||||
dek: Some deck text
|
||||
[.authors]
|
||||
* Jane Doe
|
||||
* John Smith
|
||||
[]
|
||||
{}
|
||||
[]
|
||||
:end
|
||||
|
||||
# Foreground 2: Text only
|
||||
startFrame: 50
|
||||
endFrame: 100
|
||||
|
||||
# Set foreground type
|
||||
type: text
|
||||
|
||||
# If the foreground type is `text`, set text prop here
|
||||
{.foregroundProps}
|
||||
text: Some text for the foreground
|
||||
{}
|
||||
|
||||
[]
|
||||
```
|
||||
|
|
@ -328,35 +339,29 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
|
|||
} from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
// Make an object of components to use as foregrounds
|
||||
const Components = $state({
|
||||
Headline,
|
||||
Video,
|
||||
});
|
||||
</script>
|
||||
|
||||
{#each content.blocks as block}
|
||||
<!-- Inside the content.blocks for loop... -->
|
||||
{#if block.type == 'lottie'}
|
||||
<Lottie
|
||||
src={`${assets}/animations/${block.src}`}
|
||||
theme={block.theme}
|
||||
autoplay
|
||||
loop
|
||||
showDebugInfo
|
||||
>
|
||||
<Lottie src={`${assets}/${block.src}`} >
|
||||
{#each block.foregrounds as foreground}
|
||||
{#if foreground.type == 'text'}
|
||||
<LottieForeground
|
||||
endFrame={parseInt(foreground.endFrame)}
|
||||
startFrame={parseInt(foreground.startFrame)}
|
||||
endFrame={parseInt(foreground.endFrame)}
|
||||
text={foreground.foregroundProps.text}
|
||||
/>
|
||||
{:else if foreground.type == 'component'}
|
||||
{@const Component =
|
||||
Components[foreground.foregroundProps.componentType]}
|
||||
Components[foreground.foregroundProps.componentName]}
|
||||
<LottieForeground
|
||||
endFrame={parseInt(foreground.endFrame)}
|
||||
startFrame={parseInt(foreground.startFrame)}
|
||||
endFrame={parseInt(foreground.endFrame)}
|
||||
>
|
||||
<Component {...foreground.foregroundProps} />
|
||||
</LottieForeground>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// Components
|
||||
import Lottie from './Lottie.svelte';
|
||||
import LottieForeground from './LottieForeground.svelte';
|
||||
import Headline from '../Headline/Headline.svelte';
|
||||
|
|
@ -42,17 +44,6 @@
|
|||
<Lottie src={DemoLottie} autoplay={true} showDebugInfo={true} />
|
||||
</Story>
|
||||
|
||||
<Story name="Marker">
|
||||
<Lottie
|
||||
src={MarkerSample}
|
||||
showDebugInfo
|
||||
autoplay
|
||||
marker="ballerina"
|
||||
loop
|
||||
mode="bounce"
|
||||
/>
|
||||
</Story>
|
||||
|
||||
<Story name="Segment">
|
||||
<Lottie
|
||||
src={DemoLottie}
|
||||
|
|
@ -64,6 +55,17 @@
|
|||
/>
|
||||
</Story>
|
||||
|
||||
<Story name="Marker">
|
||||
<Lottie
|
||||
src={MarkerSample}
|
||||
showDebugInfo
|
||||
autoplay
|
||||
marker="ballerina"
|
||||
loop
|
||||
mode="bounce"
|
||||
/>
|
||||
</Story>
|
||||
|
||||
<Story name="Themes">
|
||||
<Lottie
|
||||
src={ThemesSample}
|
||||
|
|
@ -81,39 +83,32 @@
|
|||
</Story>
|
||||
|
||||
<Story name="With foregrounds">
|
||||
<Lottie
|
||||
src={ForegroundSample}
|
||||
showDebugInfo
|
||||
autoplay
|
||||
speed={0.5}
|
||||
loop
|
||||
mode="bounce"
|
||||
<Lottie src={ForegroundSample} autoplay }>
|
||||
<LottieForeground
|
||||
startFrame={0}
|
||||
endFrame={50}
|
||||
position="center center"
|
||||
backgroundColour="rgba(0, 0, 0)"
|
||||
>
|
||||
<div class="headline-container">
|
||||
<Theme base="dark">
|
||||
<Headline
|
||||
hed="Headline"
|
||||
dek="This is an example of using a Svelte component as the foreground."
|
||||
authors={['Jane Doe', 'John Doe']}
|
||||
/>
|
||||
</Theme>
|
||||
</div>
|
||||
</LottieForeground>
|
||||
|
||||
<LottieForeground
|
||||
startFrame={50}
|
||||
endFrame={100}
|
||||
text="Foreground caption between frames 50 and 100."
|
||||
position="bottom center"
|
||||
backgroundColour="rgba(0, 0, 0)"
|
||||
width="normal"
|
||||
width="wide"
|
||||
/>
|
||||
|
||||
<LottieForeground
|
||||
startFrame={0}
|
||||
endFrame={50}
|
||||
position="center center"
|
||||
backgroundColour="rgba(0, 0, 0)"
|
||||
width="normal"
|
||||
>
|
||||
<Theme base="dark">
|
||||
<Headline
|
||||
hed="Lottie with foreground component"
|
||||
dek="This is an example of using a Svelte component as the foreground."
|
||||
width="normal"
|
||||
authors={['Jane Doe', 'John Doe']}
|
||||
/>
|
||||
</Theme>
|
||||
</LottieForeground>
|
||||
</Lottie>
|
||||
</Story>
|
||||
|
||||
|
|
@ -132,4 +127,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headline-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,14 +38,14 @@
|
|||
speed = 1,
|
||||
data = undefined,
|
||||
backgroundColor = '#ffffff',
|
||||
segment = undefined,
|
||||
renderConfig = undefined,
|
||||
segment,
|
||||
renderConfig,
|
||||
dotLottieRefCallback = () => {},
|
||||
useFrameInterpolation = true,
|
||||
themeId = '',
|
||||
themeData = '',
|
||||
playOnHover = false,
|
||||
marker = undefined,
|
||||
marker,
|
||||
layout = { fit: 'contain', align: [0.5, 0.5] },
|
||||
animationId = '',
|
||||
lottiePlayer = $bindable(undefined),
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import { Markdown } from '@reuters-graphics/svelte-markdown';
|
||||
|
||||
// Types
|
||||
import type { Component, Snippet } from 'svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import type { LottieState } from './ts/lottieState.svelte';
|
||||
import type {
|
||||
ContainerWidth,
|
||||
|
|
@ -22,12 +22,11 @@
|
|||
width?: ContainerWidth;
|
||||
position?: LottieForegroundPosition | string;
|
||||
text?: string;
|
||||
Foreground?: Component;
|
||||
}
|
||||
|
||||
let {
|
||||
id = '',
|
||||
class: cls = '',
|
||||
id,
|
||||
class: cls,
|
||||
startFrame = 0,
|
||||
endFrame = 10,
|
||||
children,
|
||||
|
|
@ -35,7 +34,6 @@
|
|||
width = 'normal',
|
||||
position = 'center center',
|
||||
text,
|
||||
Foreground,
|
||||
}: ForegroundProps = $props();
|
||||
|
||||
let componentState: LottieState | null = $state(getContext('lottieState'));
|
||||
|
|
@ -67,16 +65,7 @@
|
|||
</Block>
|
||||
<!-- Render children snippet -->
|
||||
{:else if children}
|
||||
<div class="scroller-lottie-foreground-item">
|
||||
{@render children()}
|
||||
</div>
|
||||
<!-- Render Foreground component -->
|
||||
{:else if Foreground}
|
||||
<div class="scroller-lottie-foreground-item">
|
||||
<Block width="fluid">
|
||||
<Foreground />
|
||||
</Block>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -24,44 +24,26 @@
|
|||
query="div.step-foreground-container"
|
||||
>
|
||||
{#snippet backgroundSnippet()}
|
||||
<!-- Add custom background HTML or component -->
|
||||
<div class="lottie-container">
|
||||
<Lottie src={LottieSample} showDebugInfo {progress} />
|
||||
</div>
|
||||
<Lottie src={LottieSample} {progress} showDebugInfo />
|
||||
{/snippet}
|
||||
{#snippet foregroundSnippet()}
|
||||
<!-- Add custom foreground HTML or component -->
|
||||
<div class="step-foreground-container"><p>Step 1</p></div>
|
||||
<div class="step-foreground-container"><p>Step 2</p></div>
|
||||
<div class="step-foreground-container"><p>Step 3</p></div>
|
||||
<div class="step-foreground-container"><p>Step 4</p></div>
|
||||
<div class="step-foreground-container"><p>Step 5</p></div>
|
||||
<div class="step-foreground-container"><h3>Step 1</h3></div>
|
||||
<div class="step-foreground-container"><h3>Step 2</h3></div>
|
||||
<div class="step-foreground-container"><h3>Step 3</h3></div>
|
||||
<div class="step-foreground-container"><h3>Step 4</h3></div>
|
||||
<div class="step-foreground-container"><h3>Step 5</h3></div>
|
||||
{/snippet}
|
||||
</ScrollerBase>
|
||||
|
||||
<style lang="scss">
|
||||
@use '../../../scss/mixins' as mixins;
|
||||
|
||||
.lottie-container {
|
||||
// border: 2px solid red;
|
||||
width: 100%;
|
||||
height: 100lvh;
|
||||
}
|
||||
|
||||
.step-foreground-container {
|
||||
height: 100lvh;
|
||||
width: 50%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
padding: 1em;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
h3 {
|
||||
background-color: antiquewhite;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue