Play HD lottie element on hover and page load

Hi Jamie,

I guess this is possible but I don’t quite understand what you want to achieve with this. If autoplay on page load is enabled, the animation will play anyway. If you then hover the animation with your mouse, it will simply continue to play. When your mouse then leaves the animation, it will stop playing and not start unless you hover it again. Is this what you are aiming for? I am asking because imagining this behaviour it sounds rather unintuitive. But nevertheless, here you go:

• add this.isFirstPlay = true; at the end of the constructor function
• after case 'mouseenter': add the line if (this.isFirstPlay) { this.isFirstPlay = false; anim.playSegments(anim.initialSegment, true); }
• change line if (this.player.dataset.onMouseleave !== 'pause') anim.playSegments(anim.initialSegment, true); to if (this.player.dataset.onMouseleave !== 'pause' && !this.isFirstPlay) anim.playSegments(anim.initialSegment, true);

I guess this should do the trick. Have a nice day!

Kind regards

If I set to autoplay there is no hover function. It just plays once and then stops.

https://ibb.co/8DGWs4g

If I set to mouse enter it doesn’t play on page load. It seems to just play once on mouse enter but not if you hover again.

https://ibb.co/CmvSQhb

I’m a bit confused on the code. You would put that in the Yootheme script field? Generally with javascript I would use the script field.

https://ibb.co/rGqssv6

Let me know. I can work on a more technical way if directed. Thanks,

If I set to autoplay there is no hover function. It just plays once and then stops.

Correct, unless you check the option *Loop animation*, then the animation will continuously play in a loop.

If I set to mouse enter it doesn’t play on page load.

Correct, because the mouse enter event is the trigger to start the animation.

It seems to just play once on mouse enter but not if you hover again.

Please do not mix up these two things: (1) the animation playing once or in a loop and (2) what happens on mouse leave if *Trigger* is set to *Mouse Enter*.

About (1): If *Loop animation* is not checked, the animation will only play once until its last frame (or until the frame defined by the settings in *Animation End*). If *Loop animation* is checked though, the animation will start over again.

About (2): If *On Mouse Leave* is set to *Continue* (and *Trigger* is set to *Mouse Enter*), the animation will start playing when the mouse enters the animation and continue to play, no matter whether the mouse leaves the animation or not. If *On Mouse Leave* is set to *Pause* (and *Trigger* is set to *Mouse Enter*), the animation will start playing when the mouse enters the animation and pause when the mouse leaves the animation. When the mouse enters the animation, it will continue playing and stop again when the mouse leaves the animation.

On the Lottie element demo page under Demo 3, you will find an example that has checked the option *Loop animation* and set *On Mouse Leave* to *Pause*.

I’m a bit confused on the code. You would put that in the Yootheme script field? Generally with javascript I would use the script field.

No, the instructions refer to the file /wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-lottie/js/hd-lottie.js, I didn’t express that clearly, sorry.