126 lines
2.8 KiB
Svelte
126 lines
2.8 KiB
Svelte
<script module lang="ts">
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import ScrollerLottie from './ScrollerLottie.svelte';
|
|
import ScrollerLottieForeground from './ScrollerLottieForeground.svelte';
|
|
import Headline from '../Headline/Headline.svelte';
|
|
import Theme from '../Theme/Theme.svelte';
|
|
|
|
import MarkerSample from './data/markerSample.lottie?url';
|
|
import ForegroundSample from './data/foregroundSample.lottie?url';
|
|
import ThemesSample from './data/themesLottie.lottie?url';
|
|
import WithScrollerBase from './demo/withScrollerBase.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Components/Graphics/ScrollerLottie',
|
|
component: ScrollerLottie,
|
|
argTypes: {
|
|
data: {
|
|
table: {
|
|
disable: true, // Hides from Docs table
|
|
},
|
|
control: false, // Removes from Controls panel
|
|
},
|
|
lottiePlayer: {
|
|
table: {
|
|
category: 'Bindable states',
|
|
},
|
|
},
|
|
progress: {
|
|
table: {
|
|
category: 'Bindable states',
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
let progress = $state(0);
|
|
</script>
|
|
|
|
<Story name="Demo">
|
|
<ScrollerLottie autoplay loop showDebugInfo />
|
|
</Story>
|
|
|
|
<Story name="Marker">
|
|
<ScrollerLottie
|
|
src={MarkerSample}
|
|
showDebugInfo
|
|
autoplay
|
|
marker="ballerina"
|
|
loop
|
|
mode="bounce"
|
|
/>
|
|
</Story>
|
|
|
|
<Story name="Segment">
|
|
<ScrollerLottie autoplay loop showDebugInfo segment={[0, 20]} speed={0.5} />
|
|
</Story>
|
|
|
|
<Story name="Themes">
|
|
<ScrollerLottie
|
|
src={ThemesSample}
|
|
showDebugInfo
|
|
autoplay
|
|
bind:progress
|
|
themeId={progress < 0.33 ? 'Water'
|
|
: progress < 0.66 ? 'air'
|
|
: 'earth'}
|
|
/>
|
|
</Story>
|
|
|
|
<Story name="Using with ScrollerBase" exportName="ScrollerBase">
|
|
<WithScrollerBase />
|
|
</Story>
|
|
|
|
<Story name="With foregrounds">
|
|
<ScrollerLottie
|
|
src={ForegroundSample}
|
|
showDebugInfo
|
|
autoplay
|
|
speed={0.5}
|
|
loop
|
|
mode="bounce"
|
|
>
|
|
<ScrollerLottieForeground
|
|
startFrame={50}
|
|
endFrame={100}
|
|
text="Foreground caption between frames 50 and 100."
|
|
position="bottom center"
|
|
backgroundColour="rgba(0, 0, 0)"
|
|
width="normal"
|
|
/>
|
|
|
|
<ScrollerLottieForeground
|
|
startFrame={0}
|
|
endFrame={50}
|
|
position="center center"
|
|
backgroundColour="rgba(0, 0, 0)"
|
|
width="normal"
|
|
>
|
|
<Theme base="dark">
|
|
<Headline
|
|
hed="ScrollerLottie with foreground component"
|
|
dek="This is an example of using a Svelte component as the foreground."
|
|
width="normal"
|
|
authors={['Jane Doe', 'John Doe']}
|
|
/>
|
|
</Theme>
|
|
</ScrollerLottieForeground>
|
|
</ScrollerLottie>
|
|
</Story>
|
|
|
|
<style lang="scss">
|
|
:global {
|
|
.scroller-lottie-foreground {
|
|
header {
|
|
padding: 2rem;
|
|
background-color: black;
|
|
}
|
|
|
|
.foreground-text {
|
|
p {
|
|
color: white !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|