CODEWITHSUNDEEP
javascriptreactjsanimationlottie
Albert Hoffman
Albert Hoffman

Reputation: 39

How to trigger lottie hover when parent element is being hovered on?

I want the lottie-player to start hovering when the div with className classes.card is hovered on. Right now, the animation only hovers when I am on the actual icon. If I add padding/margin, it doesn't increase the area that triggers the hover.

How can I get lottie-player to start the animation when div with className classes.card is hovered on?

<div className={classes.card}>
      <div className={classes.icon}>
        <lottie-player
          id={iconNumber}
          src={animations.account_services[iconNumber].url}
          style={{ width: '50px', height: '50px' }}
          hover
        />
      </div>
      <Typography className={classes.cardText}>{text}</Typography>
    </div>

Upvotes: 1

Views: 1773

Answers (1)

the Hutt
the Hutt

Reputation: 18408

We can use mouseenter and mouseout events:

.myCard {
  width: 300px;
  height: 120px;
  background-color: wheat;
  border: 1px solid;
  margin: 0 auto;
}

#player {
  width: 100px;
  height: 110px;
  border: 1px dotted #aaa;
  margin: 0 auto;
}
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="myCard" 
   onmouseenter="player.play()" 
   onmouseleave="player.stop()">
   
  <lottie-player id="player" src="https://assets10.lottiefiles.com/packages/lf20_dtg9nxtp.json" 
  background="#eee" 
  speed="1" 
  loop>
  </lottie-player>

</div>
<p>Hover over above box to play the animation</p>

Upvotes: 2

Related Questions