Skip to content

samuelOsborne/Lottie-interactive

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

alt Lottie-interactive

Lottie interactive is custom web element adding multiple types of interactivity to Lottie animations.

Installation

Lottie-interactive is available through npm.

npm install lottie-interactive

Lottie-interactive is also available though unpkg.

<script type="text/javascript" src="https://unpkg.com/lottie-interactive@latest/dist/lottie-interactive.js"></script>

Usage

From javascript module:

import { LottieInteractive } from "lottie-interactive";

Usage in markup:

<lottie-interactive path="button.json" interaction="click"></lottie-interactive>

Nuxt.js

  • npm i lottie-interactive
  • Create a plugin for lottie-interactive in /plugins/lottie-interactive.client.js:
import Vue from "vue";
import LottieInteractive from "lottie-interactive";

Vue.use(LottieInteractive);

You can then use lottie-interactive inside of your templates:

<template>
  <lottie-interactive
    path="/animations/svgenius-logo.json"
    autoplay
    loop
    view-box="0 0 500 300"
  />
</template>

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:

import React from "react";

export default function Home() {
  React.useEffect(() => {
    import("lottie-interactive/dist/lottie-interactive.js");
  });

  return (
    <div>
          <lottie-interactive
              path="/animations/svgenius-logo.json"
              autoplay
              loop
          />
    </div>
  );
}

Remarks: Animation files (.json) can be accessed if put inside the /public/ directory. URLs to the animation can also be used.

Examples

npm i
npm start

Current interactions and available attributes

Interactions

click

Plays animation when user clicks on animation container

<lottie-interactive path="button.json" interaction="click"></lottie-interactive>
freeze click

Freezes animation when user clicks on animation container

<lottie-interactive path="button.json" interaction="freeze-click" autoplay loop></lottie-interactive>
hover

Plays animation when user hovers on animation container

<lottie-interactive path="button.json" interaction="hover"></lottie-interactive>
morph

Plays animation when user hovers on animation container, plays in reverse on 'mouseexit' event

<lottie-interactive path="button.json" interaction="morph"></lottie-interactive>
morph-lock

Plays animation when user hovers on animation container. Locks animation at the end if user clicks. Plays in reverse on 'mouseexit' event.

<lottie-interactive path="button.json" interaction="morph-lock"></lottie-interactive>
switch

Plays animation when user clicks on animation container, plays again in reverse on second click

<lottie-interactive path="button.json" interaction="switch"></lottie-interactive>
play-on-show

Plays animation when container is visible

<lottie-interactive path="button.json" interaction="play-on-show"></lottie-interactive>
play-once

Plays animation once

<lottie-interactive path="button.json" interaction="play-once"></lottie-interactive>

Attributes

The default state for attributes are false or null for stroke width and color.

loop

Makes the animation loop

<lottie-interactive path="button.json" loop></lottie-interactive>
s-width

Changes the stroke width of every stroke

<lottie-interactive path="button.json" s-width="25"></lottie-interactive>
s-color

Changes the stroke color of every stroke, must be a full hexadecimal color

<lottie-interactive path="button.json" s-color="#ffffff"></lottie-interactive>
autoplay

Makes the animation play automatically on load

<lottie-interactive path="button.json" autoplay></lottie-interactive>
speed

Sets the speed of the animation

<lottie-interactive path="button.json" speed="0.5"></lottie-interactive>
delay

Delay the loading of the animation, defined in milliseconds

<lottie-interactive path="button.json" delay="3000"></lottie-interactive>
reset

Resets the animation to the first frame after it has finished playing

<lottie-interactive path="button.json" reset></lottie-interactive>
aspect-ratio

Define aspect ratio, default value is 'xMidYMid slice', more information here

<lottie-interactive path="button.json" aspect-ratio='xMidYMid meet'></lottie-interactive>

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