/Javascript/React/React lottie player on hover

React lottie player on hover

import lottieJson from './lottie.json'


const [play, setPlay] = useState(false);

function startPlay() {
  setPlay(true);
}

function stopPlay() {
  setPlay(false);
}

<div className="col-md-5" onMouseEnter={startPlay} onMouseLeave={stopPlay}>
  <Lottie
    className={"img-fluid"}
    animationData={lottieJson}
    mode={"bounce"}
    speed={2}
    play={play}
    loop
    style={{width: "400px", height: "400px", background: "#FFFFFF"}}
    ref={lottieRef}
  />

</div>

Similar codes

160 votes783 views6 answers
React install
Javascript React
-2 votes199 views1 answer
React spring transition animations
Javascript React
0 vote135 views1 answer
How to define cardTitle background image in mdl in reactjs
Javascript React
0 vote181 views1 answer
Horizontal scrollview in react js
Javascript React
0 vote190 views1 answer
Compass in react js
Javascript React
0 vote206 views2 answers
Can i pass data with usenavigate react router
Javascript React
0 vote184 views2 answers
.env file example react native
Javascript React
11 votes192 views2 answers
How to refresh the page using react
Javascript React
1 vote148 views1 answer
Audio in react
Javascript React
0 vote198 views1 answer
Reactnaviataion change title
Javascript React