Security News
pnpm 10.0.0 Blocks Lifecycle Scripts by Default
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
@dotlottie/player-component
Advanced tools
This is a Web Component for easily embedding and playing dotLottie animations on websites.
dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".
<script type="module" src="https://unpkg.com/@dotlottie/player-component@2.3.0/dist/dotlottie-player.mjs" ></script>
<script type="module" src="/node_modules/@dotlottie/player-component/dist/dotlottie-player.mjs"></script>
npm install --save @dotlottie/player-component
import '@dotlottie/player-component';
Add the element dotlottie-player
and set the src
property to a URL pointing to a .lottie or .json file.
<dotlottie-player
autoplay
controls
loop
playMode="normal"
src="http://dotlottieio.s3-website-us-east-1.amazonaws.com/sample_files/animation-external-image.lottie"
style="width: 320px"
>
</dotlottie-player>
You may set and load animations programmatically as well.
<dotlottie-player autoplay controls loop mode="normal" style="width: 320px"> </dotlottie-player>
const player = document.querySelector('dotlottie-player');
player.load('http://dotlottieio.s3-website-us-east-1.amazonaws.com/sample_files/animation-external-image.lottie');
1 - import the player and use as follows
import '@dotlottie/player-component';
function App() {
return (
<div className="App">
<dotlottie-player
src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
autoplay
loop
style={{ height: '100%', width: '100%' }}
/>
</div>
);
}
export default App;
1 - import as follows
import '@dotlottie/player-component';
function App() {
return (
<div className="App">
<dotlottie-player
src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
autoplay
loop
style={{ height: '100%', width: '100%' }}
/>
</div>
);
}
export default App;
2 - create a global.d.ts file in your src folder and add the code below
declare namespace JSX {
interface IntrinsicElements {
"dotlottie-player": any;
}
}
1 - update the plugins array in nuxt.config.js file in your root as follows
plugins: [{ src: '~/plugins/lottie-player', mode: 'client' }];
2 - create a folder plugins in your root if it doesnt already exist, add a file lottie-player.js with the following content
import * as LottiePlayer from '@dotlottie/player-component';
3 - the component can now be used in your pages or components template tag as follows without any import necessary
<template>
<dotlottie-player src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie" autoplay loop />
</template>
<script>
export default {};
</script>
Full documentation on player properties, methods, events and styling for the dotlottie-player are available here.
Project | Description |
---|---|
lottie-react | A React component for the Lottie Web player. |
lottie-vue | A Vue component for the Lottie player. |
svelte-lottie-player | Lottie player component for use with Svelte. |
jLottie | jLottie is suitable as a general purpose lottie player, though implements a subset of the features in the core player - this approach leads to a tiny footprint and great performance. |
lottie-interactivity | This is a small library to add scrolling, cursor interactivity and interaction chaining to your Lottie Animations. |
lottie-js | The library consists of methods to map the Lottie JSON to the object model and interact with properties as well as manipulate them. |
MIT License © LottieFiles.com
FAQs
dotLottie animation player web component.
We found that @dotlottie/player-component demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.