Open magtanggol03 opened 5 years ago
lottie: ?Lottie;
const defaultOptions = {
loop: true,
autoplay: false,
animationData: animationData
};
<div
onMouseEnter={() => this.lottie && this.lottie.animation.play()}
onMouseLeave={() => this.lottie && this.lottie.animation.pause()}>
<Lottie
ref={(ref) => this.lottie = ref}
options={defaultOptions}/>
</div>
@chenqingspring eventListeners
prop is not working as indicated by this issue.
Facing same issue, anyone have solution of it?
Same issue, anyone able to trigger animation on hover?
Here is a screenshot of my code. Similar to goldmont, but I toggle the handleClickToPause
function.
@jeffal Thanks! I'll be sure to try it out 👍
Hello every one it is working for me, I have used onMouseEnter and onMouseLeave on the parent container.
This is my code :
import React, { useState } from 'react'
import Lottie from 'react-lottie';
import styles from './styles.module.css'
export default function Feature({title,description,lottieData}) {
const options = {
loop: false,
autoplay: false,
animationData: lottieData,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
};
const [stopped,setStopped]=useState(true)
return (
<div
className={styles.feature}
onMouseEnter={()=>{setStopped(false)}}
onMouseLeave={()=>{setStopped(true)}}
>
<Lottie options={options} isClickToPauseDisabled isStopped={stopped} />
<div>
<h3>{title}</h3>
<p>{description}</p>
</div>
</div>
)
}
I hope this will be helpful ^^
Hello every one it is working for me, I have used onMouseEnter and onMouseLeave on the parent container.
This is my code :
import React, { useState } from 'react' import Lottie from 'react-lottie'; import styles from './styles.module.css' export default function Feature({title,description,lottieData}) { const options = { loop: false, autoplay: false, animationData: lottieData, rendererSettings: { preserveAspectRatio: "xMidYMid slice" } }; const [stopped,setStopped]=useState(true) return ( <div className={styles.feature} onMouseEnter={()=>{setStopped(false)}} onMouseLeave={()=>{setStopped(true)}} > <Lottie options={options} isClickToPauseDisabled isStopped={stopped} /> <div> <h3>{title}</h3> <p>{description}</p> </div> </div> ) }
I hope this will be helpful ^^
Nice its working
Currently trying to do it using the following but to no avail:
Basically goal was to trigger the animation on hover, then reverse the animation when leaving.