Last active
June 24, 2021 12:12
-
-
Save stephanbogner/ad0c70b6e1cab60f052132dd9ed6b6d8 to your computer and use it in GitHub Desktop.
Simple example / boilerplate / skeleton for a Lottie animation in react with lottie-web (no lottie react framework needed)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import LottieAnimationComponent from './components/LottieAnimationExampleComponent.js' | |
function App() { | |
return ( | |
<div className="App"> | |
<LottieAnimationComponent/> | |
</div> | |
); | |
} | |
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useEffect, useState, useRef } from 'react' | |
import lottie from "lottie-web"; | |
import lottieAnimationData from '../assets/lottie/lottie-test-animation.json'; | |
// If animation loads static images: | |
// Change image paths in .json to "/lottie-images/" so it loads it them from public folder | |
// (Via https://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js) | |
export default function AnimationComponent() { | |
let [isPlaying, setIsPlaying] = useState(false); | |
let [isStopped, setIsStopped] = useState(true); | |
let lottieDomRef = useRef(); | |
let lottieAnimationRef = useRef(); | |
//let checkSvgDomInterval = useRef(); | |
function playAnimation(animationRef){ | |
//clearInterval(checkSvgDomInterval.current); | |
//checkSvgDomInterval.current = setInterval(doEachInterval, 50); | |
animationRef.current.play(); | |
setIsPlaying(true); | |
setIsStopped(false); | |
} | |
function pauseAnimation(animationRef){ | |
animationRef.current.pause(); | |
setIsPlaying(false); | |
//clearInterval(checkSvgDomInterval.current); | |
} | |
function stopAnimation(animationRef){ | |
animationRef.current.stop(); | |
setIsPlaying(false); | |
setIsStopped(true); | |
//clearInterval(checkSvgDomInterval); | |
} | |
function doEachInterval(){ | |
// Something you want to do repeatedly, in my case change color of certain elements | |
} | |
function onEnterFrame(animationRef){ | |
if (getFractionOfAnimationPlayed(animationRef) > 0.8) { | |
//animationRef.current.removeEventListener('enterFrame'); | |
} | |
} | |
function onAnimationEnd(){ | |
setIsPlaying(false); | |
//clearInterval(checkSvgDomInterval) | |
} | |
function getFractionOfAnimationPlayed(animationRef){ | |
const durationInFrames = animationRef.current.getDuration(true); | |
const currentFrame = animationRef.current.currentFrame; | |
return currentFrame / durationInFrames; | |
} | |
useEffect(() => { | |
loadAnimation(lottieAnimationRef, lottieDomRef, lottieAnimationData); | |
}, []); | |
function loadAnimation(animationRef, domRef, animationData){ | |
const options = { | |
container: domRef.current, | |
loop: false, | |
autoplay: true, | |
animationData: animationData, | |
}; | |
animationRef.current = lottie.loadAnimation(options); | |
animationRef.current.removeEventListener('complete'); | |
animationRef.current.removeEventListener('enterFrame'); | |
animationRef.current.addEventListener('complete', onAnimationEnd); /* via https://github.com/airbnb/lottie-web/issues/701 */ | |
animationRef.current.addEventListener('enterFrame', () => onEnterFrame(animationRef)); | |
} | |
function deleteAnimation(domRef){ | |
domRef.current.innerHTML = ''; | |
} | |
/* | |
// Reload animation | |
deleteAnimation(lottieDomRef); | |
loadAnimationHuman(lottieAnimationRef, lottieDomRef, lottieAnimationData); | |
// Play animation | |
playAnimation(lottieAnimationRef); | |
// Pause animation | |
pauseAnimation(lottieAnimationRef); | |
// Stop animation | |
stopAnimation(lottieAnimationRef); | |
*/ | |
return (<div> | |
<div ref={lottieDomRef} /> | |
</div>) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment