Hot questions for Using Lottie in javascript

Question:

Im quite a beginner, experimenting with SVG animations. I have made a animation and loaded it in my simple html page with Lottie. But I been trying to make it destroy itself and show the rest of the page content, which is the header and p.

I seen this code, googling this, but not sure where to put it, went for what I thought was logical, and paste it right under. But did not get what I wanted.

ani.addEventListener('complete', function(){ ani.destroy() })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
    scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="master.css">
    <script src="master.js"></script>    
    <script src="lottie.js"></script>
    <title>Document</title>
</head>
<body onload="start()">

    <div id="velkommen"></div>

    <header>
        <h1>Min header</h1>
    </header>

    <p>tekstteksttekstketkekte</p>


</body>
</html>


window.onload(start())

function start(){
    var container = document.getElementById("velkommen");
    var animation = bodymovin.loadAnimation({    
        container: container, 
        renderer: 'svg',
        loop: false,
        autoplay: true,
        path: 'data.json'
     });
}

Answer:

I found out! Incase someone else was wondering :

function start(){
    var anim;
var animdata ={
    container: document.getElementById("velkommen"),
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: "data.json"
};
anim = bodymovin.loadAnimation(animdata);
anim.addEventListener('complete',stopa);
}

function stopa(){
    document.getElementById("velkommen").style.display = "none";
}

Question:

How can I make it so the user is only able to trigger the mouse hover & mouse left events, once the Lottie animation has initially played in full.

Currently the user is able to cause the hover event when the animation is mid-playing, something I don't want to be able to happen.

Thanks

var anim4;
    var anim5 = document.getElementById('lottie5')
    var animation5 = {
        container: anim5,
        renderer: 'svg',
        loop: true,
        autoplay: false,   /*MAKE SURE THIS IS FALSE*/
        rendererSettings: {
        progressiveLoad: false},
        path: 'https://assets1.lottiefiles.com/packages/lf20_H2PpYV.json',
        name: 'myAnimation',
    };
    anim4 = lottie.loadAnimation(animation5);


    // SCROLLING DOWN
    var waypoint5 = new Waypoint({
     element: document.getElementById('lottie5'),
     handler: function(direction) {
       if (direction === 'down') {
         anim4.playSegments([[130,447],[358,447]], true);
         this.destroy()
       }
     },
       offset: '50%'
    })

    anim5.addEventListener("mouseenter", myScript1);
    anim5.addEventListener("mouseleave", myScript2);

function myScript1(){
    anim4.goToAndStop(500, true);
}

function myScript2(){
    anim4.playSegments([358,447],true);
}; 

Answer:

    var anim4;
    var anim5 = document.getElementById('lottie5')
    var animation5 = {
        container: anim5,
        renderer: 'svg',
        loop: false,
        autoplay: true,   /*MAKE SURE THIS IS FALSE*/
        rendererSettings: {
        progressiveLoad: false},
        path: 'https://assets1.lottiefiles.com/packages/lf20_H2PpYV.json',
        name: 'myAnimation',
    };
    anim4 = lottie.loadAnimation(animation5);


    // SCROLLING DOWN
    var waypoint5 = new Waypoint({
     element: document.getElementById('lottie5'),
     handler: function(direction) {
       if (direction === 'down') {
         anim4.playSegments([[130,447],[358,447]], true);
         this.destroy()
       }
     },
       offset: '50%'
    })

    anim4.addEventListener("complete", function(){
        console.log('Animation completed!!');
        anim5.addEventListener("mouseenter", myScript1);
        anim5.addEventListener("mouseleave", myScript2);
    });

function myScript1(){
    anim4.goToAndStop(500, true);
}

function myScript2(){
    anim4.playSegments([358,447],true);
}; 

Question:

Messing with Lottie for playing animations on the web. The documentation seems fairly straightforward to get going but I can't find any documentation/examples of a very basic workflow in javascript: show pre-animation state => animate => detect animation complete => show post-anim state. Here's an example of what I'm doing with a liking system:

Unliked Post:
1: Display default state thumb graphic
2: User clicks thumb, play thumb animation
3: Animation completes, display liked state thumb graphic

Liked Post:
4: If user clicks already liked thumb...play reverse animation
5: Reverse animation complete, display default thumb graphic

Any help is much appreciated!


Answer:

Figure it out using goToAndStop. When the animation is created I'm checking if the users liked (hearted) the post and displaying the first frame or last frame of the animation accordingly:

handleAnimation(anim: any) {
    this.anim = anim;

    if (this.isHearted) {
        this.anim.goToAndStop(25, true); //last frame. on state.
    }
    else {
        this.anim.goToAndStop(0, true); //first frame. off state.
    }   
}

So when a user likes a post I will play the heart animation this.anim.play() and if the user unlike's the post I will set the animation state to the first frame this.anim.goToAndStop(0, true). What's nice about using the frames of the animation is I don't need seperate graphics for the off and on state of the icon, i can just use the animation object like shown.

One final note...I also noticed that a strange pink stroke was being added to my animation objects making them look kind of blurry. It seems the lottie plugin creates an SVG from the json data and for some reason was applying a stroke to the svg. So I had to remove it in css via:

lottie-animation-view {
    stroke: none !important;
}

Just figured I'd mention that in case it happens for anyone else. FYI I am using the ng-lottie lib in ionic.