Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samuelOsborne/Lottie-interactive
Lottie interactive is a custom element adding multiple types of interactivity to Lottie animations.
https://github.com/samuelOsborne/Lottie-interactive
after-effects airbnb animation-container interactive interactivity javascript lottie lottie-animations plays-animation stroke-color stroke-width typescript typescript-library
Last synced: 3 months ago
JSON representation
Lottie interactive is a custom element adding multiple types of interactivity to Lottie animations.
- Host: GitHub
- URL: https://github.com/samuelOsborne/Lottie-interactive
- Owner: samuelOsborne
- License: mit
- Created: 2020-07-05T18:40:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T13:00:05.000Z (about 2 years ago)
- Last Synced: 2024-03-16T09:36:13.669Z (11 months ago)
- Topics: after-effects, airbnb, animation-container, interactive, interactivity, javascript, lottie, lottie-animations, plays-animation, stroke-color, stroke-width, typescript, typescript-library
- Language: TypeScript
- Homepage:
- Size: 489 KB
- Stars: 59
- Watchers: 9
- Forks: 12
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-lottie - View
README
Lottie interactive is custom web element adding multiple types of interactivity to Lottie animations.
## Installation
Lottie-interactive is available through npm.
```bash
npm install lottie-interactive
```
Lottie-interactive is also available though unpkg.
```HTML
```
## Usage
From javascript module:
```javascript
import { LottieInteractive } from "lottie-interactive";
```
Usage in markup:
```HTML
```
## _Nuxt.js_
- `npm i lottie-interactive`
- Create a plugin for lottie-interactive in `/plugins/lottie-interactive.client.js`:
```javascript
import Vue from "vue";
import LottieInteractive from "lottie-interactive";
Vue.use(LottieInteractive);
```
You can then use lottie-interactive inside of your templates:
```html
```
Remarks: Animation files (.json) can be accessed if put inside the `/static` directory. URLs to the animation
can also be used.
## _Next.js_
- `npm i lottie-interactive`
Then inside of your pages:
```Javascript
import React from "react";
export default function Home() {
React.useEffect(() => {
import("lottie-interactive/dist/lottie-interactive.js");
});
return (
);
}
```
Remarks: Animation files (.json) can be accessed if put inside the `/public/` directory. URLs to the animation
can also be used.
## Examples
```shell
npm i
npm start
```
### Current interactions and available attributes
#### Interactions
##### click
Plays animation when user clicks on animation container
```HTML
```
##### freeze click
Freezes animation when user clicks on animation container
```HTML
```
##### hover
Plays animation when user hovers on animation container
```HTML
```
##### morph
Plays animation when user hovers on animation container, plays in reverse on 'mouseexit' event
```HTML
```
##### morph-lock
Plays animation when user hovers on animation container. Locks animation at the end if user clicks. Plays in reverse on 'mouseexit' event.
```HTML
```
##### switch
Plays animation when user clicks on animation container, plays again in reverse on second click
```HTML
```
##### play-on-show
Plays animation when container is visible
```HTML
```
##### play-once
Plays animation once
```HTML
```
#### Attributes
The default state for attributes are false or null for stroke width and color.
##### loop
Makes the animation loop
```HTML
```
##### s-width
Changes the stroke width of every stroke
```HTML
```
##### s-color
Changes the stroke color of every stroke, must be a full hexadecimal color
```HTML
```
##### autoplay
Makes the animation play automatically on load
```HTML
```
##### speed
Sets the speed of the animation
```HTML
```
##### delay
Delay the loading of the animation, defined in milliseconds
```HTML
```
##### reset
Resets the animation to the first frame after it has finished playing
```HTML
```
##### aspect-ratio
Define aspect ratio, default value is 'xMidYMid slice', more information [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio)
```HTML
```
### Usage notice
#### Browser compatibility
Currently this library is usable on modern browsers supporting **Web components** and **Lottie**.
#### Bundlers
We recommend using this library with a module bundler such as **webpack**.
### Upcoming features
- Color on hover
- Animation zooming
- Padding modifier
- Upgrade codebase to use Microsoft FAST
### Youtube guides
https://www.youtube.com/channel/UCPPNxV39UlVo3emNQSNNTug
### Lottie animations
https://svgenius.co
https://lottiefiles.com/svgenius