lottiefiles / svelte-lottie-player Goto Github PK

View Code? Open in Web Editor NEW

128.0 7.0 15.0 1.79 MB

Lottie Player component for Svelte

License: MIT License

JavaScript 16.07% HTML 83.93%

svelte svelte-components svelte-component lottie

svelte-lottie-player's Introduction

Svelte Lottie Player

Lottie player component for use with Svelte.

This provides a Lottie player using the lottie-web library, adding a control toolbar, render graph and other handy configs for viewing Lottie animations.

Features

Configuration of lottie-web via props
Control toolbar with play, pause, stop, progress track with seeker, looping
Render graph for viewing frame render times

Getting started
Installation
Usage

Demos

Installation

With yarn:

yarn add @lottiefiles/svelte-lottie-player

With npm:

npm install --save @lottiefiles/svelte-lottie-player

Usage

Basic steps for use in a Svelte project:

<!-- App.svelte -->
<script>
  import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';

  let controlsLayout = [
    'previousFrame',
    'playpause',
    'stop',
    'nextFrame',
    'progress',
    'frame',
    'loop',
    'spacer',
    'background',
    'snapshot',
    'zoom',
    'info',
  ];
</script>

<LottiePlayer
  src="https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json"
  autoplay="{true}"
  loop="{true}"
  controls="{true}"
  renderer="svg"
  background="transparent"
  height="{600}"
  width="{600}"
  controlsLayout="{controlsLayout}"
/>

svelte-lottie-player's People

Contributors

Stargazers

Watchers

Forkers

manjufy ostaradesign mathyoumb xpluscal bastiaanv carlosjordandev thangnd-uit07 isabella232 jneuendorf jakemckown vessel-co tombermingham

svelte-lottie-player's Issues

Package will break in future Svelte versions

See the following output from Svelte:

9:35:03 p.m. [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

@lottiefiles/[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition

Action is required to update this package to use the new standard otherwise it will break in future versions.

SvelteKit issue

svelte-lottie-player seems not to work with the latest sveltekit (SvelteKit v1.0.0-next.113).

Here is the error message:
SyntaxError: The requested module '/node_modules/lottie-web/build/player/lottie.js?v=8db5e539' does not provide an export named 'default'

Not a valid SSR component

this is the error I'm getting:

Error: <LottiePlayer> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled module

Useless `bind:clientWidth` and `bind:clientHeight`

The current LottiePlayer.svelte component uses bind:clientWidth and bind:clientHeight on lines 560-561.

In svelte, bind:clientWidth/Height attaches an empty iframe to monitor these properties of an element. However, attaching an empty iframe can cause significant slowdowns.

This use case of bind:clientWidth/Height isn't even justified, because the ONLY time where these variables are used is in the toggleZoom() function, which just reads them. There's no effects that could run when these properties change, it's unnecessarily slowing down the web page. Plus, we already have a wrapperRef which references the exact element these bindings are on.

Solution:

Get rid of the old variables.
Get rid the lines 560-561.
On the lines 485-486, use wrapperRef.clientHeight/Width.

---  wrapperRef.style.height = playerHeight + "px";
---  wrapperRef.style.width = playerWidth + "px";
+++  wrapperRef.style.height = wrapperRef.clientHeight + "px";
+++  wrapperRef.style.width = wrapperRef.clientWidth + "px";

Though I don't have the exact numbers, this will definitely speed up the component.
I'll create a pull request a little bit later.

Could not load content (LottiePlayer.svelte) // Error

I encountered an error while loading the Lottie player. The problem occurs when the Lottie animation is loaded on the page, and there are also warnings during the app's building process. Interestingly, despite these errors and warnings, the Lottie player loads normally and works as expected.

Code in browser in sources:
LottiePlayer.svelte
Could not load content for http://localhost:5173/sl/LottiePlayer.svelte (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

My code:

<script>
	import { onMount } from 'svelte';

	export let src;
	export let width;

	let LottiePlayer;
	let dataReady = false;

	onMount(async () => {
		const module = await import('@lottiefiles/svelte-lottie-player');
		LottiePlayer = module.LottiePlayer;
		dataReady = true;
	});
</script>

{#if LottiePlayer && dataReady}
	<div style="max-width: {width}px;" class="mx-auto">
		<svelte:component
			this={LottiePlayer}
			{src}
			autoplay={true}
			loop={true}
			controls={false}
			renderer="svg"
			background="transparent"
			height={0}
			width={0}
			controlsLayout={false}
		/>
	</div>
{:else}
	<div class="flex flex-col gap-6">
		<div class="animate-pulse">
			<div class="w-30 h-60 bg-gray-100 rounded-xl max-w-sm mx-auto"></div>
		</div>
	</div>
{/if}

Terminal warnings/errors:

Error: Not found: /sl/LottiePlayer.svelte
    at resolve (/Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:483:13)
    at resolve (/Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:285:5)
    at Object.handle (/Users/nik/Sites/quantifly-game/src/hooks.server.js:43:9)
    at Module.respond (/Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:505:22

Building warnings:

vite v4.4.9 building for production...
transforming (114) node_modules/.pnpm/[email protected]/node_modules/uuid/dist/esm-browser/index.js11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected]/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:231:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
229:   {#each layout as item}
230:     {#if item === 'playpause'}
231:       <div class="btn" on:click="{togglePlay}" class:active="{isPlaying || isPaused}">
           ^
232:         {#if isPlaying}
233:           <svg {...ICON_SIZE}>
11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected]/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:231:6 A11y: <div> with click handler must have an ARIA role
229:   {#each layout as item}
230:     {#if item === 'playpause'}
231:       <div class="btn" on:click="{togglePlay}" class:active="{isPlaying || isPaused}">
           ^
232:         {#if isPlaying}
233:           <svg {...ICON_SIZE}>
11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected]/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:244:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
242:       </div>
243:     {:else if item === 'stop'}
244:       <div class="btn" on:click="{stop}" class:active="{isStopped}">
           ^
245:         <svg {...ICON_SIZE}>
246:           <path
11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected]/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:244:6 A11y: <div> with click handler must have an ARIA role
242:       </div>
243:     {:else if item === 'stop'}
244:       <div class="btn" on:click="{stop}" class:active="{isStopped}">
           ^
245:         <svg {...ICON_SIZE}>
246:           <path
11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected]/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:269:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
267:       />
268:     {:else if item === 'loop'}
269:       <div class="btn" on:click="{toggleLooping}" class:active="{loop}">
           ^
270:         <svg {...ICON_SIZE}>
271:           <path
11:34:51 PM [vite-plugin-svelte] /Users/nik/Sites/quantifly-game/node_modules/.pnpm/@[email protected]/node_modules/@lottiefiles/svelte-lottie-player/src/components/Controls.svelte:269:6 A11y: <div> with click handler must have an ARIA role

Not able to listen to any events

How do I listen to events when using this library? The standard Svelte way doesn't work:

<LottiePlayer
		on:frame={console.log}
		on:stop={console.log}
		bind:this={player}
		src={Logo}
		autoplay={true}
		loop={true}
		height={120}
		width={120}
	/>

document is not defined

I got a warning that document is not defined in my terminal.

I'm using SvelteKit.

<script lang="ts">
	//@ts-ignore
	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
</script>

<LottiePlayer
	  src="/checkmark.json"
	  autoplay={true}
	  loop={true}
	  renderer="svg"
	  background="transparent"
	  height={600}
	  width={600}
/>

Accessibility warnings

Compiling with webpack and using svelte-loader, warnings are logged for the following:

Controls.svelte:
A11y: on:mouseout must be accompanied by on:blur (330:6)
A11y: on:mouseout must be accompanied by on:blur (412:8)
A11y: on:mouseover must be accompanied by on:focus (330:6)
A11y: on:mouseover must be accompanied by on:focus (412:8)

Popover.svelte:
A11y: on:mouseout must be accompanied by on:blur (81:0)
A11y: on:mouseover must be accompanied by on:focus (81:0)

Would it make sense to implement on:blur and on:focus for these cases? Otherwise, it looks like these warnings can be suppressed by adding a svelte-ignore comment above each line, i.e.


error when loading .lottie files

the library works with .json files but when I tried to load a .lottie file, I got error below:

lottie.js:1157 Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json').

Please advise.

document is not defined in onDestroy()

the onDestroy() method uses SSR and thus doesn't have the document defined. Needs to be removed.

Width and Height "other" unit support

Currently we can only specify the width and height using pixels. It would be cool if there was someway we could also support rem, percentages, view based units, etc.

sveltekit and svelte-lottie-player

I get this error when building my project with an imported LottiePlayer

document is not defined ReferenceError: document is not defined

I read some other issue where they suggested adding this vite config item to the svelte.config.js

But that doesn't solve the issue for me.

The only thing that does is this code:

But this causes some ugly popin of the player. I want the animation to render on first draw. Any suggestions? Does LottiPlayer not work for static sites?

How to control manually?

First off- thanks for this amazing package! I spent way too long trying to get lottie to play nicely with Svelte. Meanwhile this just works 🎉

Second- I've been struggling with manually triggering the play() event.

After importing with import { LottiePlayer, play } from '@lottiefiles/svelte-lottie-player';

When I run play(), I'm told it's not a function.

Sorry for the confusion!

Error when importing lottie

Hello,

I get this error when I try to import lottie, anyone who knows how to fix this?

error message:

'LottiePlayer' is declared but its value is never read.js(6133)
Could not find a declaration file for module '@lottiefiles/svelte-lottie-player'. 'c:/sites/components/components-app/node_modules/@lottiefiles/svelte-lottie-player/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/lottiefiles__svelte-lottie-player if it exists or add a new declaration (.d.ts) file containing declare module '@lottiefiles/svelte-lottie-player';js(7016)

Thanks in advance !

How do I use events like when animation finishes?

Is there a specific way to use events?

No typescript?

Not Found - GET https://registry.npmjs.org/@types%2flottiefiles__svelte-lottie-player - Not found

Could not find a declaration file for module '@lottiefiles/svelte-lottie-player'. '/Users/zzz/Projects/cto-for-hire/ctoforhire-svelte/node_modules/@lottiefiles/svelte-lottie-player/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/lottiefiles__svelte-lottie-player` if it exists or add a new declaration (.d.ts) file containing `declare module '@lottiefiles/svelte-lottie-player';`ts(7016)

In 2023 you'd expect node modules to have TypeScript by default..