lottie-play-on-scroll
v1.0.1
Published
This package will makes you could play lottie animation by scroll mouse wheel on PC or touch scrolling on mobile devices
Downloads
2
Readme
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
Reference
- 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)