Use of Popcorn + jQuery for animations

Question

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!

Answer 1

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.2¹ 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.}