Reusable js-class-hook & data attributes for setting pins

scrollmagic-reusable-pins.js

/*----------------------------------------------
  Generic & reusable logic for sticky/fixed pins

  Requires scrollmagic.io
-----------------------------------------------*/
// Dependencies
if (ScrollMagic === undefined) { return; }

document.addEventListener("DOMContentLoaded", function() {
  var controller = new ScrollMagic.Controller();
  var elements = document.getElementsByClassName("js-scroll-trigger");

  for (var i = 0; i < elements.length; i++) {
    var el = elements[i];
    var pin = el.querySelector(".js-scroll-pin");

    var opts = { triggerElement: el };

    if (el.dataset && el.dataset.scrollTriggerhook) {
      opts.triggerHook = parseInt(el.dataset.scrollTriggerhook);
    }
    if (el.dataset && el.dataset.scrollOffset) {
      opts.offset = parseInt(el.dataset.scrollOffset);
    }

    opts.duration = el.clientHeight;

    var scene = new ScrollMagic.Scene(opts)
      .setPin(pin)
      .addTo(controller);
  }
});