javascriptanimationpopcornjs

How to destroy a popcorn.js animation?

I am using Popcorn.js together with the base Plugin (https://github.com/brianchirls/popcorn-base) and the style Plugin (https://github.com/brianchirls/popcorn-base/blob/master/plugins/popcorn.style.js) to create an animation like that:

var _pop = Popcorn(this.domElements.video.get(0), {
    frameAnimation : true
});

_pop.style({
    target : someElement,
    start : 0,
    end : 10,
    left : {
        0: "32.608695652173914%",
        1: "47.04968944099379%",
        0.4226381772051142: "44.87577639751553%"
    },
    top : {
        0: "26.136363636363637%",
        1: "18.356643356643357%",
        0.4226381772051142: "52.09790209790209%"
    }
});

The animation works beautifully. I can't seem to get my head around how to destroy the animation though.

I can't access the _teardown method. I'm generally not sure about the best practice of destroying animations.

Solution

  • After you create the popcorn event, you need to retrieve the id that Popcorn generated, like this:

    var id = popcorn.getLastTrackEventId();

    In practice, you'd probably put it into an array so you can store an id for all your events. Then, to delete it:

    popcorn.removeTrackEvent(id);

    _teardown gets called automatically by removeTrackEvent along with other clean-up work that it does.