How to trigger animation on hover?

[magtanggol03]

Currently trying to do it using the following but to no avail:

      <Lottie options={defaultOptions}
        height={100}
        width={100}
        isStopped={hover['isStopped']}
        direction={hover['direction']}
        eventListeners={
            [
                { eventName: 'onMouseOver', callback: () => mouseOn() },
            { eventName: 'onMouseLeave', callback: () => mouseOut() }
            ]
        }
      />

Basically goal was to trigger the animation on hover, then reverse the animation when leaving.

[goldmont]

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>

[jeffal]

@chenqingspring eventListeners prop is not working as indicated by this issue.

[sanket-zeus]

Facing same issue, anyone have solution of it?

[rheng001]

Same issue, anyone able to trigger animation on hover?

[jeffal]

Here is a screenshot of my code. Similar to goldmont, but I toggle the handleClickToPause function.

[rheng001]

@jeffal Thanks! I'll be sure to try it out 👍

[zeghmouri]

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 ^^

[AbrarAli14]

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