LottiePlayOnScroll

LottiePlayOnScroll could help you to play lottie animation forward/backward base on user scroll the mouse wheel on PC or touch/drag on mobile screen.

Demo

Demo Links:

Example Project

Installation

Install through npm:

npm install lottie-play-on-scroll

Usage

React.js

You should install @lottiefiles/react-lottie-player yourself, then integration with lottie-play-on-scroll

import { useRef } from 'react'
import { attachScroll } from 'lottie-play-on-scroll'
import { Player } from '@lottiefiles/react-lottie-player'

function App() {
  const lottieWrapper = useRef<HTMLDivElement>(null)

  return (
    <div ref={lottieWrapper}>
      <Player
        autoplay={false} // suggest turn off autoplay
        loop={true}
        controls={false}
        src="https://lottie.host/7401522f-2d8b-4049-ad18-eb0edb6af224/CE9lFrNlEH.json"
        lottieRef={(animation) => {
          if(lottieWrapper.current) attachScroll(animation, lottieWrapper.current)
        }}
      />
    </div>
  )
}

export default App

Vanilla.js

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lottie play on scroll vanilla example</title>
  </head>
  <body>
    <div id="lottie"></div>
    <script type="module" src="/your/path/main.js"></script>
  </body>
</html>

# main.js
import { loadLottie } from 'lottie-play-on-scroll'

loadLottie({
  container: document.getElementById('lottie'),
  renderer: 'svg',
  loop: true,
  autoplay: false,
  path: 'https://lottie.host/7401522f-2d8b-4049-ad18-eb0edb6af224/CE9lFrNlEH.json' // or '/lottie/data.json'
})

Document

loadLottie

loadLottie(parameters, config);

name	optional	note
parameters	must	The parameters as same as what you pass into `lottie.loadAnimation`, the only different is the type of `container` must be kind of `HTMLElement`
container	must	The container which wrapper the lottie animation, must be kind of `HTMLElement`, the `wheel/touchmove` event listener will be bind on it
config	optional	like below defaultConfig

attachScroll

attachScroll(animation, container, config);

name	optional	note
animation	must	lottie instance
container	must	The container which wrapper the lottie animation, must be kind of `HTMLElement`, the `wheel/touchmove` event listener will be bind on it
config	optional	like below defaultConfig

config

Due to when user scroll the mouse wheel or drag on screen, the wheel or touchmove will be fire much times, for performace optimization and speed adjustment, we could use pcEventRate and mobileEventRate config to adjust the play speed of animation

const defaultConfig = {
  speed: 50, // backward/forward 50 milliseconds every animation play
  pcEventRate: 1, // every 1 event will play 50 (config.speed) milliseconds animation 
  mobileEventRate: 3, // every 4 event will play 50 (config.speed) milliseconds animation
};

Related Projects

Development

Getting Start

Follow below commands to start development

npm install # install lottie-play-on-scroll project package
npm run build:watch # build lottie-play-on-scroll to js when code change
npm link # set lottie-play-on-scroll as local npm package
cd ./examples/react # or ./examples/vanilla
npm install # install lottie-play-on-scroll/vanilla project packages
npm run link # load local lottie-play-on-scroll npm package
npm run dev # run dev server

Build

npm run build
npm run build:watch

Publish

npm login
npm publish --dry-run
npm publish