react-lottie vs @lottiefiles/react-lottie-player vs react-lottie-player vs lottie-react-web
React Animation Libraries Comparison
1 Year
react-lottie@lottiefiles/react-lottie-playerreact-lottie-playerlottie-react-webSimilar Packages:
What's React Animation Libraries?

These libraries provide tools for integrating Lottie animations into React applications, allowing developers to easily render animations created in Adobe After Effects and exported as JSON files. They simplify the process of adding engaging animations to enhance user experience and interface design. Each library has its own set of features, performance optimizations, and ease of use, catering to different project needs and developer preferences.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-lottie291,2011,71228 kB995 months agoMIT
@lottiefiles/react-lottie-player248,5417512.99 MB473 months agoMIT
react-lottie-player155,831-120 kB-9 months agoMIT
lottie-react-web7,309188-435 years agoMIT
Feature Comparison: react-lottie vs @lottiefiles/react-lottie-player vs react-lottie-player vs lottie-react-web

Ease of Use

  • react-lottie:

    While it has a slightly steeper learning curve due to its extensive options, it provides detailed documentation that helps developers understand how to utilize its features effectively. It supports various customization options for animations.

  • @lottiefiles/react-lottie-player:

    This package offers a very intuitive API, making it easy for developers to integrate animations with minimal setup. It supports props for controlling playback, loop, and speed, which can be easily managed within React components.

  • react-lottie-player:

    This library is designed for ease of use, providing a simple player component that abstracts much of the complexity involved in animation playback, making it accessible for developers of all skill levels.

  • lottie-react-web:

    Designed for simplicity, this library allows for straightforward integration of Lottie animations. However, it may require more manual setup compared to others, which could be a drawback for some developers.

Performance

  • react-lottie:

    This library is stable and performs well, but it may not be as optimized for performance as newer libraries. Developers may need to implement performance optimizations manually for complex animations.

  • @lottiefiles/react-lottie-player:

    This package is optimized for performance, ensuring smooth animations even on lower-end devices. It leverages React's rendering capabilities to minimize unnecessary re-renders, enhancing overall performance.

  • react-lottie-player:

    Offers good performance with a focus on smooth playback and responsiveness. It is designed to handle animations efficiently, making it a solid choice for interactive applications.

  • lottie-react-web:

    Performance is adequate for most use cases, but it may not be as optimized as other libraries. It is suitable for lightweight animations but could struggle with complex animations on less powerful devices.

Community Support

  • react-lottie:

    With a large user base and extensive community contributions, this library has a wealth of resources, examples, and third-party tools available, making it easier for developers to find help.

  • @lottiefiles/react-lottie-player:

    Backed by LottieFiles, this package benefits from strong community support and regular updates, ensuring that developers have access to the latest features and bug fixes.

  • react-lottie-player:

    This package is gaining traction and has a growing community, but it may not yet match the extensive resources available for more established libraries.

  • lottie-react-web:

    This library has a smaller community compared to others, which may result in limited support and fewer resources for troubleshooting or advanced use cases.

Customization Options

  • react-lottie:

    Offers extensive customization options, allowing developers to manipulate animations in detail. This flexibility is beneficial for projects requiring precise control over animation behavior.

  • @lottiefiles/react-lottie-player:

    Provides a variety of props for customization, allowing developers to control aspects such as animation speed, direction, and looping behavior, making it highly flexible for different use cases.

  • react-lottie-player:

    This library strikes a balance between ease of use and customization, providing enough options to tailor animations without overwhelming the developer.

  • lottie-react-web:

    Customization options are somewhat limited compared to other libraries, which may restrict the ability to fine-tune animations for specific needs.

Documentation and Learning Curve

  • react-lottie:

    The documentation is extensive and well-structured, but the library's complexity may present a steeper learning curve for beginners compared to simpler alternatives.

  • @lottiefiles/react-lottie-player:

    Features comprehensive documentation that is beginner-friendly, making it easy for new developers to get started with Lottie animations in React.

  • react-lottie-player:

    Offers clear and concise documentation, making it accessible for developers of all levels. The learning curve is relatively gentle, allowing for quick implementation of animations.

  • lottie-react-web:

    Documentation is straightforward but may lack depth, which could pose challenges for developers unfamiliar with Lottie animations.

How to Choose: react-lottie vs @lottiefiles/react-lottie-player vs react-lottie-player vs lottie-react-web
  • react-lottie:

    Select this package if you need a mature library with a wide user base and extensive community support. It is a good choice for projects that require a stable and well-tested solution, though it may not be as actively maintained as newer alternatives.

  • @lottiefiles/react-lottie-player:

    Choose this package for a modern, well-maintained solution with a focus on performance and ease of use. It provides a simple API and is actively supported by LottieFiles, making it ideal for developers seeking a reliable option with good documentation.

  • react-lottie-player:

    Choose this package for a balance between features and simplicity. It provides a player component that is easy to integrate and use, making it a solid choice for developers who want to implement Lottie animations without extensive configuration.

  • lottie-react-web:

    Opt for this package if you are looking for a lightweight solution specifically designed for web applications. It offers a straightforward API but may lack some advanced features found in other libraries, making it suitable for simpler use cases.

README for react-lottie

Lottie Animation View for React (Angular, Vue)

npm version

Demo

https://chenqingspring.github.io/react-lottie

Wapper of bodymovin.js

bodymovin is Adobe After Effects plugin for exporting animations as JSON, also it provide bodymovin.js for render them as svg/canvas/html.

Why Lottie?

Flexible After Effects features

We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll be adding new features on a regular basis.

Manipulate your animation any way you like

You can go forward, backward, and most importantly you can program your animation to respond to any interaction.

Small file sizes

Bundle vector animations within your app without having to worry about multiple dimensions or large file sizes. Alternatively, you can decouple animation files from your app’s code entirely by loading them from a JSON API.

Learn more › http://airbnb.design/lottie/

Looking for lottie files › https://www.lottiefiles.com/

Installation

Install through npm:

npm install --save react-lottie

Usage

Import pinjump.json as animation data

import React from 'react'
import Lottie from 'react-lottie';
import * as animationData from './pinjump.json'

export default class LottieControl extends React.Component {

  constructor(props) {
    super(props);
    this.state = {isStopped: false, isPaused: false};
  }

  render() {
    const buttonStyle = {
      display: 'block',
      margin: '10px auto'
    };

    const defaultOptions = {
      loop: true,
      autoplay: true, 
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice'
      }
    };

    return <div>
      <Lottie options={defaultOptions}
              height={400}
              width={400}
              isStopped={this.state.isStopped}
              isPaused={this.state.isPaused}/>
      <button style={buttonStyle} onClick={() => this.setState({isStopped: true})}>stop</button>
      <button style={buttonStyle} onClick={() => this.setState({isStopped: false})}>play</button>
      <button style={buttonStyle} onClick={() => this.setState({isPaused: !this.state.isPaused})}>pause</button>
    </div>
  }
}

props

The <Lottie /> Component supports the following components:

options required

the object representing the animation settings that will be instantiated by bodymovin. Currently a subset of the bodymovin options are supported:

loop options [default: false]

autoplay options [default: false]

animationData required

rendererSettings required

width optional [default: 100%]

pixel value for containers width.

height optional [default: 100%]

pixel value for containers height.

eventListeners optional [default: []]

This is an array of objects containing a eventName and callback function that will be registered as eventlisteners on the animation object. refer to bodymovin#events where the mention using addEventListener, for a list of available custom events.

example:

eventListeners=[
  {
    eventName: 'complete',
    callback: () => console.log('the animation completed:'),
  },
]

isClickToPauseDisabled optional [default: false] When this props is left unspecified or is set to false animations are paused or resumed when a user clicks or taps them. If you do not want this behaviour set this prop to true.

Related Projects

Contribution

Your contributions and suggestions are heartily welcome.

License

MIT