From 675860a4b8a8a026f017f4d6078053c702010bb5 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Wed, 3 Dec 2025 13:40:47 -0500 Subject: [PATCH] updates marker screenshot --- src/components/Lottie/Lottie.mdx | 77 +++++++++--------------- src/components/Lottie/Lottie.svelte | 5 +- src/components/Lottie/assets/marker.jpg | Bin 0 -> 29197 bytes src/components/Lottie/assets/marker.png | Bin 214601 -> 0 bytes 4 files changed, 30 insertions(+), 52 deletions(-) create mode 100644 src/components/Lottie/assets/marker.jpg delete mode 100644 src/components/Lottie/assets/marker.png diff --git a/src/components/Lottie/Lottie.mdx b/src/components/Lottie/Lottie.mdx index fc0eb12f..f8e194df 100644 --- a/src/components/Lottie/Lottie.mdx +++ b/src/components/Lottie/Lottie.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/blocks'; import * as LottieStories from './Lottie.stories.svelte'; -import CompositionMarkerImage from './assets/marker.png?url'; +import CompositionMarkerImage from './assets/marker.jpg?url'; @@ -39,10 +39,10 @@ If importing the Lottie file directly into a Svelte component, make sure to appe import { Lottie } from '@reuters-graphics/graphics-components'; // Import Lottie file - import DemoLottie from './lottie/demo.lottie?url'; // Append **?url** to the file path + import MyLottie from './lottie/my-lottie.zip?url'; // Append **?url** to the file path - + ``` ## Using with ArchieML @@ -86,54 +86,9 @@ With the graphics kit, you'll likely get your text and prop values from an Archi {/each} ``` -## Markers - -It is possible to play a specific portion of the animation using markers set in [AfterEffects](https://helpx.adobe.com/in/after-effects/using/layer-markers-composition-markers.html). The `Lottie` component can play a specific marker via the `marker` prop. - -The list of available markers can be found in the debug info when `showDebugInfo` prop is enabled. - -> 💡NOTE: The **Comment** section of the Composition Marker dialog should only contain the name of your marker. - -Composition Marker Dialog - -[Demo](?path=/story/components-graphics-scrollerlottie--marker) - -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 - marker: myMarker -[] -``` - -... which you'll parse out of a ArchieML block object before passing to the `Lottie` component. - -```svelte - - -{#each content.blocks as block} - - {#if block.type == 'lottie'} - - {/if} -{/each} -``` - ## Playing a segment -Just like markers, it is also possible to play a specific segment of the 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) @@ -174,6 +129,30 @@ With the graphics kit, you'll likely get your text and prop values from an Archi {/each} ``` +## 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 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`. + +When setting markers in AfterEffects, ensure that the **Comment** section of the Composition Marker contains only the name of your marker: + +Composition Marker Dialog + +[Demo](?path=/story/components-graphics-scrollerlottie--marker) + +```svelte + + + +``` + ## 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. diff --git a/src/components/Lottie/Lottie.svelte b/src/components/Lottie/Lottie.svelte index 82e4c5f7..1bca85ea 100644 --- a/src/components/Lottie/Lottie.svelte +++ b/src/components/Lottie/Lottie.svelte @@ -15,7 +15,6 @@ import { Tween } from 'svelte/motion'; // Components - import Block from '../Block/Block.svelte'; import Debug from './Debug.svelte'; import WASM from './lottie/dotlottie-player.wasm?url'; @@ -377,7 +376,7 @@ }); - +
{#if showDebugInfo && lottiePlayer} {/if} @@ -395,7 +394,7 @@ {#if children} {@render children()} {/if} - +