diff --git a/src/components/ScrollerLottie/ScrollerLottie.mdx b/src/components/ScrollerLottie/ScrollerLottie.mdx
index 79ddb5eb..c7d5ab5b 100644
--- a/src/components/ScrollerLottie/ScrollerLottie.mdx
+++ b/src/components/ScrollerLottie/ScrollerLottie.mdx
@@ -7,7 +7,7 @@ import CompositionMarkerImage from './assets/marker.png?url';
# ScrollerLottie
-The `ScrollerLottie` component plays Lottie animations. It uses the [dotLottie-web](https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/) library to render the animations.
+The `ScrollerLottie` component uses the [dotLottie-web](https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/) library to render Lottie animations.
## How to use .lottie files
diff --git a/src/components/ScrollerLottie/ScrollerLottie.stories.svelte b/src/components/ScrollerLottie/ScrollerLottie.stories.svelte
index 27edc1b1..54547b69 100644
--- a/src/components/ScrollerLottie/ScrollerLottie.stories.svelte
+++ b/src/components/ScrollerLottie/ScrollerLottie.stories.svelte
@@ -5,6 +5,8 @@
import Headline from '../Headline/Headline.svelte';
import Theme from '../Theme/Theme.svelte';
+ // Denmo Lottie file
+ import DemoLottie from './data/demo.lottie?url';
import MarkerSample from './data/markerSample.lottie?url';
import ForegroundSample from './data/foregroundSample.lottie?url';
import ThemesSample from './data/themesLottie.lottie?url';
@@ -37,7 +39,7 @@
-
+
diff --git a/src/components/ScrollerLottie/ScrollerLottie.svelte b/src/components/ScrollerLottie/ScrollerLottie.svelte
index 9b55dd21..4b8f1e02 100644
--- a/src/components/ScrollerLottie/ScrollerLottie.svelte
+++ b/src/components/ScrollerLottie/ScrollerLottie.svelte
@@ -17,7 +17,6 @@
// Components
import Debug from './Debug.svelte';
import WASM from './data/dotlottie-player.wasm?url';
- import DefaultLottie from './data/defaultLottie.lottie?url';
// Types
import type { Props } from './ts/types';
@@ -35,7 +34,7 @@
autoplay = false,
loop = false,
mode = 'forward',
- src = DefaultLottie,
+ src,
speed = 1,
data = undefined,
backgroundColor = '#ffffff',
@@ -50,7 +49,6 @@
layout = { fit: 'contain', align: [0.5, 0.5] },
animationId = '',
lottiePlayer = $bindable(undefined),
- width = 'normal',
height = '100lvh',
showDebugInfo = false,
lottieState = createLottieState(),
@@ -399,7 +397,6 @@
:global(.lottie-block) {
position: relative;
height: 100%;
- outline: 2px solid blue;
.lottie-container {
width: 100%;
diff --git a/src/components/ScrollerLottie/data/defaultLottie.lottie b/src/components/ScrollerLottie/data/demo.lottie
similarity index 100%
rename from src/components/ScrollerLottie/data/defaultLottie.lottie
rename to src/components/ScrollerLottie/data/demo.lottie
diff --git a/src/components/ScrollerLottie/ts/types.ts b/src/components/ScrollerLottie/ts/types.ts
index dc2767df..64f17a8e 100644
--- a/src/components/ScrollerLottie/ts/types.ts
+++ b/src/components/ScrollerLottie/ts/types.ts
@@ -1,6 +1,5 @@
// Types
-import type { ContainerWidth } from '../../@types/global';
import type { Snippet } from 'svelte';
import {
type Config,
@@ -17,7 +16,7 @@ type DotlottieProps = {
renderConfig?: Config['renderConfig'];
segment?: Config['segment'];
speed?: Config['speed'];
- src?: Config['src'];
+ src: Config['src'];
useFrameInterpolation?: Config['useFrameInterpolation'];
marker?: Config['marker'] | undefined;
layout?: Config['layout'];
@@ -35,7 +34,6 @@ export type Props = DotlottieProps & {
// Additional properties can be added here if needed
lottiePlayer?: DotLottieType | undefined;
showDebugInfo?: boolean;
- width?: ContainerWidth;
height?: string;
lottieState?: LottieState;
progress?: number;