0

I have a lottie animation that I have integrated it in my code. I want to show a specific frame on initial load and when the user hover it the animation should start from the beginning and completes it.

This is what I want to show in first load - This is what I want to show on first load

And this is the complete animation - enter image description here

This is my code 

let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
    container: iconMenu,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
});
animationMenu.addEventListener('DOMReady',function(){
    animationMenu.playSegments([1,200],true);
});
iconMenu.addEventListener('mouseover', (e) => {
    animationMenu.play();
});

This is my fiddle

Can anyone please help me?

hakkim
  • 666
  • 15
  • 36

1 Answers1

3

It looks like you're using an outdated version of Lottie in this fiddle. Once that's updated you probably want to pass through the initialSgments option instead of using playSegments. In this case you can remove your DOMReady code block entirely and it works as expected. The one issue with your animation is the circle by itself doesn't actually exist. There's a tiny dot of green on the only half frame where that circle is completed before the rest starts animating. 51.5 is the closest from you can get, here's a fiddle showing it

let iconMenu = document.querySelector('.bodymovinanim1');
let animationMenu = bodymovin.loadAnimation({
        container: iconMenu,
        renderer: 'svg',
        loop: false,
        autoplay: false,
        path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
        initialSegment: [51.5, 200],
});

iconMenu.addEventListener('mouseover', (e) => {
animationMenu.play();
});
JHeth
  • 7,067
  • 2
  • 23
  • 34
  • Thanks bro.. It works perfect... But when I hover it the animation starts from the already set initalSegment value. Is there anyway that I can play the animation from beginning when I am hovering it... As well as after the animation completing how can I make it to come back to the already given initialSegment? – hakkim May 14 '20 at 17:06
  • Not sure I understand the use case here. You want to show the ring on page load, but on hover you want the ring to disappear and play the animation from the beginning where the ring gets drawn and then after the animation is done go back to the ring regardless of hover state? I mean it's possible but why? – JHeth May 17 '20 at 07:51
  • Exactly. I need to redraw it from the beginning when I hover it. That's how my animation is. I tried to make it work with goToAndPlay() method. But it didn't work. – hakkim May 18 '20 at 06:08