Use of Popcorn + jQuery for animations

animation, html, jquery, popcornjs, video

Solution

There isn't a particularly nice way to do this using the Popcorn footnote plugin as-is. It just toggles the `.style.display` property on the footnote as neccessary, and there isn't any practical way to hook this.

However, the footnote plugin is simple and you can just copy it and make a new plugin with the behaviour you want. Working from the source of the plugin in Popcorn 1.21 we just need to change a few lines to make them fade in and out instead:

(function ( Popcorn ) {
  Popcorn.plugin( "footnoteAnimated", { // <---
  _setup: function( options ) {

    var target = document.getElementById( options.target );

    options._container = document.createElement( "div" );
    options._container.style.display = "none";
    options._container.innerHTML  = options.text;

    if ( !target && Popcorn.plugin.debug ) {
      throw new Error( "target container doesn't exist" );
    }
    target && target.appendChild( options._container );
  },

  start: function( event, options ){
    $( options._container ).fadeIn(); // <---
  },

  end: function( event, options ){
    $( options._container ).fadeOut(); // <---
  },
  _teardown: function( options ) {
    document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options._container );
  }
});

})( Popcorn );

Include this in your project and you're set. Using your example (jsfiddle):

Popcorn("#video").footnoteAnimated({
  start: 2,
  end: 6,
  text: "Pop!",
  target: "target"
});

1. I removed the Butter manifest and comments to save space. If you need them you can find them in the original source linked above.

Problem

I would like to use Popcorn.js which seems very handy for managing videos. I am now using the footnote method, everything is working fine. ``` example.footnote({ start: 2, end: 6, text: "Pop!", target: "layer" }); ``` I want to animate the footnote created with jQuery (I would want the footnote to fadeIn/fadeOut, for example). How would you manage that? I'm not sure if I can mix jQuery and Popcorn and I can't manage to find that much documentation... My only idea is to check with jQuery if there is some text inside my #layer div and then animate it but I'm not sure if it is the good way. Thank you!

Original source