kandi background
Explore Kits

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

 by   airbnb JavaScript Version: 5.10.1 License: MIT

 by   airbnb JavaScript Version: 5.10.1 License: MIT

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 wibbitz-lottie-web' or download it from GitHub, npm.
Render After Effects animations natively on Web, Android and iOS, and React Native.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • lottie-web has a medium active ecosystem.
  • It has 27978 star(s) with 2785 fork(s). There are 452 watchers for this library.
  • There were 2 major release(s) in the last 6 months.
  • There are 613 open issues and 2080 have been closed. On average issues are closed in 824 days. There are 30 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of lottie-web is 5.10.1
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 .

                      Get all kandi verified functions for this library.

                      Get all kandi verified functions for this library.

                      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.

                      lottie-web Examples and Code Snippets

                      See all related Code Snippets

                      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 "*"
                      • Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"
                      • 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 .

                      Find more information at:

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

                      Save this library and start creating your kit

                      Install
                      • npm i lottie-web

                      Clone
                      • https://github.com/airbnb/lottie-web.git

                      • gh repo clone airbnb/lottie-web

                      • git@github.com:airbnb/lottie-web.git

                      Share this Page

                      share link
                      Reuse Pre-built Kits with lottie-web
                      Consider Popular iOS Libraries
                      Try Top Libraries by airbnb
                      Compare iOS Libraries with Highest Support
                      Compare iOS Libraries with Highest Quality
                      Compare iOS Libraries with Highest Security
                      Compare iOS Libraries with Permissive License
                      Compare iOS Libraries with Highest Reuse
                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
                      over 650 million Knowledge Items
                      Find more libraries
                      Reuse Solution Kits and Libraries Curated by Popular Use Cases
                      Explore Kits

                      Save this library and start creating your kit