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.
Install through npm:
npm install lottie-play-on-scroll
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<!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'
})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
};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 servernpm run build
npm run build:watch
npm login
npm publish --dry-run
npm publish- npm package development
- lottie files & player
- pjchender
- [Guide] 發佈 npm 套件 - 從手動到自動（0）：專案與套件建置篇
- [Guide] 發佈 npm 套件 - 從手動到自動（1）：發佈前所需的設定檔（package.json）
- [Guide] 發佈 npm 套件 - 從手動到自動（2）：手動 publish 篇
- [Guide] 發佈 npm 套件 - 從手動到自動（3）：整合 Travis CI 和 Github 進行自動化測試
- [Guide] 發佈 npm 套件 - 從手動到自動（4）：semantic-release 自動更新版號
- [Guide] 發佈 npm 套件 - 從手動到自動（5）：semantic-release 自動發佈到 npm
- [Guide] 發佈 npm 套件 - 從手動到自動（6）：semantic-release 的外掛設定與自動產生 CHANGELOG
- [Guide] 發佈 npm 套件 - 從手動到自動（7）：Coveralls 的測試覆蓋率與 README 中的標章（code test coverage badge）