Lottie event listeners and states for web - javascript

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!

score 0 · Accepted Answer · answered Apr 11 '18 at 20:37

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.

Lottie event listeners and states for web - javascript

1 Answers1