kandi background
Explore Kits

lottie-web | Effects animations natively on Web Android iOS | iOS library

 by   airbnb JavaScript Version: Current License: MIT

 by   airbnb JavaScript Version: Current License: MIT

Download this library from

kandi X-RAY | lottie-web Summary

lottie-web is a JavaScript library typically used in Telecommunications, Media, Media, Entertainment, Mobile, iOS, React Native applications. lottie-web has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i noah-lottie-web' or download it from GitHub, npm.
Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • lottie-web has a medium active ecosystem.
  • It has 26512 star(s) with 2648 fork(s). There are 465 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 789 open issues and 1784 have been closed. On average issues are closed in 66 days. There are 20 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of lottie-web is current.
lottie-web Support
Best in #iOS
Average in #iOS
lottie-web Support
Best in #iOS
Average in #iOS

quality kandi Quality

  • lottie-web has 0 bugs and 0 code smells.
lottie-web Quality
Best in #iOS
Average in #iOS
lottie-web Quality
Best in #iOS
Average in #iOS

securitySecurity

  • lottie-web has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • lottie-web code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
lottie-web Security
Best in #iOS
Average in #iOS
lottie-web Security
Best in #iOS
Average in #iOS

license License

  • lottie-web is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
lottie-web License
Best in #iOS
Average in #iOS
lottie-web License
Best in #iOS
Average in #iOS

buildReuse

  • lottie-web releases are not available. You will need to build from source code and install.
  • Deployable package is available in npm.
  • Installation instructions, examples and code snippets are available.
  • lottie-web saves you 132 person hours of effort in developing the same functionality from scratch.
  • It has 216 lines of code, 0 functions and 189 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
lottie-web Reuse
Best in #iOS
Average in #iOS
lottie-web Reuse
Best in #iOS
Average in #iOS
Top functions reviewed by kandi - BETA

kandi has reviewed lottie-web and discovered the below as its top functions. This is intended to give you an instant insight into lottie-web implemented functionality, and help decide if they suit your requirements.

  • create the worker instance
  • Manages map function
  • Decorators for the keyframe .
  • Init an expression
  • Function that returns the point on the line .
  • Seed the generator
  • Interpolation - interpolation frames
  • Creates a mask .
  • Renders the gradient .
  • Load font from the list of font files .

lottie-web Key Features

The script supports precomps, shapes, solids, images, null objects, texts

It supports masks and inverted masks. Maybe other modes will come but it has a huge performance hit.

It supports time remapping

The script supports shapes, rectangles, ellipses and stars.

Expressions. Check the wiki page for more info.

Not supported: image sequences, videos and audio are not supported

No negative layer stretching! No idea why, but stretching a layer messes with all the data.

Option 6:

copy iconCopydownload iconDownload
brew tap danielbayley/adobe
brew cask install lottie

HTML player installation

copy iconCopydownload iconDownload
# with npm
npm install lottie-web

# with bower
bower install bodymovin

HTML

copy iconCopydownload iconDownload
<script src="js/lottie.js" type="text/javascript"></script>

Events

copy iconCopydownload iconDownload
lottie.loadAnimation({
  container: element, // the dom element
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animationData, // the animation data
  // ...or if your animation contains repeaters:
  // animationData: cloneDeep(animationData), // e.g. lodash.clonedeep
  rendererSettings: {
    context: canvasContext, // the canvas context, only support "2d" context
    preserveAspectRatio: 'xMinYMin slice', // Supports the same options as the svg element's preserveAspectRatio property
    clearCanvas: false,
    progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
    hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
    className: 'some-css-class-name',
    id: 'some-id',
  }
});

Targeting specific Lottie animations on hover with lottie-web in React

copy iconCopydownload iconDownload
import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";

function App() {
  const containerOne = useRef(null);
  const containerTwo = useRef(null);

  useEffect(() => {
    lottie.loadAnimation({
      name:"animationOne",
      container: containerOne.current,
      renderer: "svg",
      loop: true,
      autoplay: false,
      animationData: require("./office.json")
    });

    lottie.loadAnimation({
      name:"animationTwo",
      container: containerTwo.current,
      renderer: "svg",
      loop: true,
      autoplay: false,
      animationData: require("./office.json")
    });

    return () => {
      lottie.destroy();
    };
  }, []);

  return (
    <div className="App">
      <h1>React Lottie Demo</h1>

      {/* First lottie */}
      <div
        ref={containerOne}
        onMouseEnter={() => lottie.play("animationOne")}
        onMouseLeave={() => lottie.pause("animationOne")}
      />

      {/* Second lottie */}
      <div
        ref={containerTwo}
        onMouseEnter={() => lottie.play("animationTwo")}
        onMouseLeave={() => lottie.pause("animationOne")}
      />
    </div>
  );
}

export default App;

Angular build - Unmatched selector: %

copy iconCopydownload iconDownload
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

Trigger event on animation start with lottie-web

copy iconCopydownload iconDownload
import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";

function App() {
  const container = useRef(null);

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: container.current,
      renderer: "svg",
      loop: false,
      autoplay: true,
      animationData: require("../media/lottie/greeter.json")
    });

    anim.addEventListener('complete', function(e) { console.log('element ended'); });
    anim.addEventListener('DOMLoaded', function(e) { console.log('element loaded'); });

    return () => {
      lottie.play();
    };
  }, []);

  return (
      <div className="dark-bg h-screen pointer-events-none"
        ref={container}
      />
  );
}

export default App;

Angular build - Expected identifier but found &quot;*&quot;

copy iconCopydownload iconDownload
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

React/gatsby with Lottie animation bottlenecks the DOM

copy iconCopydownload iconDownload
import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

import Lottie from "lottie-react"
import data from "../components/assets/contact.json"

const SecondPage = () => {
  const contactAnimation = JSON.parse(JSON.stringify(data))
  return (
    <Layout>
      <SEO title="Page two" />
      <h1>Hi from the second page</h1>
      <p>Welcome to page 2</p>
      <Link to="/">Go back to the homepage</Link>
      <Lottie animationData={contactAnimation} style={{ width: "600px" }} />
    </Layout>
  )
}

export default SecondPage

How to preserve aspect ratio upon resizing browser containing a react-lottie component?

copy iconCopydownload iconDownload
  export function useSizeComponents (ref) {
  const [size, setSize] = useState([0, 0])

  useLayoutEffect(() => {
    function updateSize () {
      let newSize = [window.innerWidth, window.innerHeight]
      if (ref?.current) {
        newSize = [ref.current.offsetWidth, ref.current.offsetHeight]
      }
      setSize(newSize)
    }
    window.addEventListener('resize', updateSize)
    updateSize()
    return () => window.removeEventListener('resize', updateSize)
  }, [])

  return size
}
const MyComponent = () => {
  const [width, height] = useSizeComponents()
  const scaleLottie = 0.5

  const myOptions = {
    loop: true,
    autoplay: true,
    renderer: 'canvas',
    animationData: animationData,
  }

  const control = useMemo(() => {
    if (!width) return null
    const xMidYMid = 0.5
    const sizeComponent = {
      width: width * scaleLottie,
      height: width * scaleLottie * xMidYMid
    }
    return <Lottie key={width} options={myOptions} {...sizeComponent} />
  }, [width])

  return (
    <div>
      ...other stuff
      {control}
    </div>
  )
}
-----------------------
  export function useSizeComponents (ref) {
  const [size, setSize] = useState([0, 0])

  useLayoutEffect(() => {
    function updateSize () {
      let newSize = [window.innerWidth, window.innerHeight]
      if (ref?.current) {
        newSize = [ref.current.offsetWidth, ref.current.offsetHeight]
      }
      setSize(newSize)
    }
    window.addEventListener('resize', updateSize)
    updateSize()
    return () => window.removeEventListener('resize', updateSize)
  }, [])

  return size
}
const MyComponent = () => {
  const [width, height] = useSizeComponents()
  const scaleLottie = 0.5

  const myOptions = {
    loop: true,
    autoplay: true,
    renderer: 'canvas',
    animationData: animationData,
  }

  const control = useMemo(() => {
    if (!width) return null
    const xMidYMid = 0.5
    const sizeComponent = {
      width: width * scaleLottie,
      height: width * scaleLottie * xMidYMid
    }
    return <Lottie key={width} options={myOptions} {...sizeComponent} />
  }, [width])

  return (
    <div>
      ...other stuff
      {control}
    </div>
  )
}

let variable is undefined in useImperativeHandle function

copy iconCopydownload iconDownload
// hanlder.js
const stop = anim => anim.stop()
// api.js
const getAPI = anim => () => ({
  stop: stop.bind(this, anim),
  // or simply
  setSpeed: s => anim.setSpeed(s),

  // you can mock APIs here if anim is null or throw an Error
});
const [anim, setAnim] = React.useState(null);

React.useEffect(() => {
  // initialization part
}, []);

React.useImperativeHandle(ref, getAPI(anim), [anim]);
-----------------------
// hanlder.js
const stop = anim => anim.stop()
// api.js
const getAPI = anim => () => ({
  stop: stop.bind(this, anim),
  // or simply
  setSpeed: s => anim.setSpeed(s),

  // you can mock APIs here if anim is null or throw an Error
});
const [anim, setAnim] = React.useState(null);

React.useEffect(() => {
  // initialization part
}, []);

React.useImperativeHandle(ref, getAPI(anim), [anim]);

Ionic/Angular + Lottie: animate each Lottie individually?

copy iconCopydownload iconDownload
import { Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
  @Input() card: {id: number, title: string};
  internalState = true;
  @Input() stateFromParent: boolean;
  constructor() { }

  ngOnInit() {
  }

  toggleInternalState() {
    this.internalState  = !this.internalState;
    this.stateFromParent = !this.stateFromParent;
  }

}

<div style="border: 1px solid green; padding: 5px;">
<p>ID: {{card.id}}</p>
<p>Title: {{card.title}}</p>
<p>internalState: {{internalState | json}}</p>
<p>stateFromParent: {{stateFromParent | json}} (NOTE: it will mange its own internal one, but if the parent's input changes that new value will be passed in)</p>
<button (click)="toggleInternalState()">Toggle Value</button>
</div>
-----------------------
import { Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
  @Input() card: {id: number, title: string};
  internalState = true;
  @Input() stateFromParent: boolean;
  constructor() { }

  ngOnInit() {
  }

  toggleInternalState() {
    this.internalState  = !this.internalState;
    this.stateFromParent = !this.stateFromParent;
  }

}

<div style="border: 1px solid green; padding: 5px;">
<p>ID: {{card.id}}</p>
<p>Title: {{card.title}}</p>
<p>internalState: {{internalState | json}}</p>
<p>stateFromParent: {{stateFromParent | json}} (NOTE: it will mange its own internal one, but if the parent's input changes that new value will be passed in)</p>
<button (click)="toggleInternalState()">Toggle Value</button>
</div>

Dynamic imports with webpack and angular, Cannot find some?

copy iconCopydownload iconDownload
   import(/*webpackChunkName: "TweenMax" */ "gsap/src/minified/TweenMax.min.js").then(({default: TweenMax}) => {

How to import default export type in TypeScript?

copy iconCopydownload iconDownload
import Lottie from 'lottie-web';

declare interface Window {
  lottie: typeof Lottie; //LottiePlayer
}

Community Discussions

Trending Discussions on lottie-web
  • Cannot find name 'GlobalCompositeOperation'
  • Targeting specific Lottie animations on hover with lottie-web in React
  • Angular build - Unmatched selector: %
  • Trigger event on animation start with lottie-web
  • Angular build - Expected identifier but found &quot;*&quot;
  • Angular TSLint - Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;
  • React/gatsby with Lottie animation bottlenecks the DOM
  • How to preserve aspect ratio upon resizing browser containing a react-lottie component?
  • let variable is undefined in useImperativeHandle function
  • Ionic/Angular + Lottie: animate each Lottie individually?
Trending Discussions on lottie-web

QUESTION

Cannot find name 'GlobalCompositeOperation'

Asked 2022-Apr-10 at 13:59

While working with ng-lottie for animations. It is suddenly having build issues. Know more .

Hence, in search of alternatives I am trying ng-particles.

I have installed it and added the configs as per docs.

But, now I am getting Cannot find name 'GlobalCompositeOperation'

Package.json

{
  "name": "ngrx-poc",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4202",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.1.0",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/forms": "~13.1.0",
    "@angular/localize": "~13.1.0",
    "@angular/platform-browser": "~13.1.0",
    "@angular/platform-browser-dynamic": "~13.1.0",
    "@angular/router": "~13.1.0",
    "@ng-bootstrap/ng-bootstrap": "^12.0.0",
    "@ngrx/store": "^13.0.2",
    "@popperjs/core": "^2.10.2",
    "apexcharts": "^3.33.2",
    "bootstrap": "^5.1.3",
    "lottie-web": "^5.9.1",
    "ng-apexcharts": "^1.7.0",
    "ng-otp-input": "^1.8.5",
    "ng-particles": "^2.43.1",
    "ngx-lottie": "^8.0.1",
    "ngx-toastr": "^14.2.1",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "tsparticles": "^1.43.1",
    "tsparticles-engine": "^2.0.0-beta.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.2",
    "@angular/cli": "~13.1.2",
    "@angular/compiler-cli": "~13.1.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BsDropdownComponent } from './components/bs-dropdown/bs-dropdown.component';
import { UserListComponent } from './components/user-list/user-list.component';
import { HttpClientModule } from '@angular/common/http';
import { ProductComponent } from './components/product/product.component';
import { addProductReducer } from './components/product/product.reducer';
import { ReactiveFormsModule } from '@angular/forms';
import { TopNavComponent } from './top-nav/top-nav.component';
import { ToasterComponent } from './components/toaster/toaster.component';
import { ToastrModule } from 'ngx-toastr';
import { ChartsApexComponent } from './components/charts-apex/charts-apex.component';
import { NgApexchartsModule } from 'ng-apexcharts';
import { OtpInputComponent } from './components/otp-input/otp-input.component';
import { NgOtpInputModule } from 'ng-otp-input';
import { NgxLottieComponentComponent } from './components/ngx-lottie-component/ngx-lottie-component.component';
import { LottieModule } from 'ngx-lottie';
import player from 'lottie-web';
import { CheckBootstrapComponent } from './components/check-bootstrap/check-bootstrap.component';
import { NgParticlesModule } from "ng-particles";

// lottie config
export function playerFactory() {
  return player;
}


@NgModule({
  declarations: [
    AppComponent,
    BsDropdownComponent,
    UserListComponent,
    ProductComponent,
    TopNavComponent,
    ToasterComponent,
    ChartsApexComponent,
    OtpInputComponent,
    NgxLottieComponentComponent,
    CheckBootstrapComponent,
  ],
  imports: [
    BrowserModule,
    NgbModule,
    HttpClientModule,
    BrowserAnimationsModule,
    StoreModule.forRoot({ product: addProductReducer }),
    ReactiveFormsModule,
    NgApexchartsModule,
    NgOtpInputModule,
    NgParticlesModule,
    LottieModule.forRoot({ player: playerFactory }),
    ToastrModule.forRoot({
      preventDuplicates: true,
      iconClasses: {
        error: 'toast-error',
        info: 'toast-info',
        success: 'toast-success',
        warning: 'toast-warning',
      }
    }), // ToastrModule added
    

  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

App.ts

import { Component } from '@angular/core';
import { NgParticlesModule } from 'ng-particles';
import { ISourceOptions } from 'tsparticles';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  particlesOptions: ISourceOptions = {
    background: {
      color: {
        value: 'white',
      },
    },
    fpsLimit: 60,
    interactivity: {
      detectsOn: 'canvas',
      events: {
        onClick: {
          enable: true,
          mode: 'push',
        },
        onHover: {
          enable: true,
          mode: 'repulse',
        },
        resize: true,
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.8,
          size: 30,
        },
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 100,
          duration: 0.4,
        },
      },
    },
    particles: {
      color: {
        value: '#a9a9a9',
      },
      links: {
        color: '#a9a9a9',
        distance: 200,
        enable: true,
        opacity: 0.7,
        width: 1.5,
      },
      collisions: {
        enable: true,
      },
      move: {
        direction: 'none',
        enable: true,
        outMode: 'bounce',
        random: false,
        speed: 2,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          value_area: 800,
        },
        value: 80,
      },
      opacity: {
        value: 1,
      },
      shape: {
        type: 'diamond',
      },
      size: {
        random: true,
        value: 3,
      },
    },
    detectRetina: true,
  };
 
}

App.component.html

<ng-particles id="tsparticles" [options]="particlesOptions" ></ng-particles>

I don't know wheather the issue is of angular or it is related to Canvas.

Please suggest any working alternatives for ng-lottie or ng-particles

ANSWER

Answered 2022-Apr-10 at 13:59

this an issue with typescript version and for me details you can take a look at here :

https://github.com/matteobruni/tsparticles/issues/3853

Source https://stackoverflow.com/questions/71796111

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install lottie-web

Or you can use the script file from here: https://cdnjs.com/libraries/bodymovin Or get it directly from the AE plugin clicking on Get Player.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Share this Page

share link
Reuse Pre-built Kits with lottie-web
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.