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

makes story args reactive

Browse source
This commit is contained in:
Sudev Kiyada 2026-01-12 13:59:31 +05:30
parent ce69a48db8
commit 8ba47845b2
Failed to extract signature
1 changed files with 41 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/components/Lottie/Lottie.stories.svelte
View file

@ -40,42 +40,53 @@
let progress = $state(0); let progress = $state(0);
</script> </script>
<Story name="Demo"> <Story name="Demo" args={{ autoplay: true, showDebugInfo: true }}>
<Lottie src={DemoLottie} autoplay={true} showDebugInfo={true} /> {#snippet children(args)}
<Lottie src={DemoLottie} {...args} />
{/snippet}
</Story> </Story>
<Story name="Segment"> <Story
<Lottie name="Segment"
src={DemoLottie} args={{
autoplay autoplay: true,
loop loop: true,
showDebugInfo showDebugInfo: true,
segment={[0, 20]} segment: [0, 20],
speed={0.5} speed: 0.5,
/> }}
>
{#snippet children(args)}
<Lottie src={DemoLottie} {...args} />
{/snippet}
</Story> </Story>
<Story name="Marker"> <Story
<Lottie name="Marker"
src={MarkerSample} args={{
showDebugInfo autoplay: true,
autoplay loop: true,
marker="ballerina" showDebugInfo: true,
loop marker: 'ballerina',
mode="bounce" mode: 'bounce',
/> }}
>
{#snippet children(args)}
<Lottie src={MarkerSample} {...args} />
{/snippet}
</Story> </Story>
<Story name="Themes"> <Story name="Themes" args={{ autoplay: true, showDebugInfo: true }}>
<Lottie {#snippet children(args)}
src={ThemesSample} <Lottie
showDebugInfo src={ThemesSample}
autoplay bind:progress
bind:progress themeId={progress < 0.33 ? 'Water'
themeId={progress < 0.33 ? 'Water' : progress < 0.66 ? 'air'
: progress < 0.66 ? 'air' : 'earth'}
: 'earth'} {...args}
/> />
{/snippet}
</Story> </Story>
<Story name="Using with ScrollerBase" exportName="ScrollerBase"> <Story name="Using with ScrollerBase" exportName="ScrollerBase">