scrollama - npm Package Compare versions

Comparing version 2.1.6 to 2.2.0

build/scrollama.js

@@ -35,20 +35,20 @@ (function (global, factory) {
 
-  var el = document.createElement('div');
+  var el = document.createElement("div");
   el.id = getOffsetId(id);
-  el.className = 'scrollama__debug-offset';
-  el.style.position = 'fixed';
-  el.style.left = '0';
-  el.style.width = '100%';
-  el.style.height = '0';
-  el.style.borderTop = '2px dashed black';
-  el.style.zIndex = '9999';
+  el.className = "scrollama__debug-offset";
+  el.style.position = "fixed";
+  el.style.left = "0";
+  el.style.width = "100%";
+  el.style.height = "0";
+  el.style.borderTop = "2px dashed black";
+  el.style.zIndex = "9999";
 
-  var text = document.createElement('p');
-  text.innerText = "\"." + stepClass + "\" trigger: " + offsetVal;
-  text.style.fontSize = '12px';
-  text.style.fontFamily = 'monospace';
-  text.style.color = 'black';
-  text.style.margin = '0';
-  text.style.padding = '6px';
-  el.appendChild(text);
+  var p = document.createElement("p");
+  p.innerHTML = "\"." + stepClass + "\" trigger: <span>" + offsetVal + "</span>";
+  p.style.fontSize = "12px";
+  p.style.fontFamily = "monospace";
+  p.style.color = "black";
+  p.style.margin = "0";
+  p.style.padding = "6px";
+  el.appendChild(p);
   document.body.appendChild(el);
@@ -70,6 +70,10 @@ }
   var offsetMargin = ref.offsetMargin;
+  var offsetVal = ref.offsetVal;
+  var format = ref.format;
 
+  var post = format === "pixels" ? "px" : "";
   var idVal = getOffsetId(id);
   var el = document.getElementById(idVal);
   el.style.top = offsetMargin + "px";
+  el.querySelector("span").innerText = "" + offsetVal + post;
 }
@@ -85,3 +89,3 @@
   var elB = document.getElementById((prefix + "_below"));
-  var display = state === 'enter' ? 'block' : 'none';
+  var display = state === "enter" ? "block" : "none";
 
@@ -126,2 +130,3 @@ if (elA) { elA.style.display = display; }
   var direction = "down";
+  var format = "percent";
 
@@ -131,2 +136,6 @@ var exclude = [];
   /* HELPERS */
+  function err(msg) {
+    console.error(("scrollama error: " + msg));
+  }
+
   function reset() {
@@ -188,3 +197,4 @@ cb = {
 
-    offsetMargin = offsetVal * viewH;
+    var mult = format === "pixels" ? 1 : viewH;
+    offsetMargin = offsetVal * mult;
 
@@ -197,3 +207,3 @@ if (isReady) {
 
-    if (isDebug) { update({ id: id, stepOffsetHeight: stepOffsetHeight, offsetMargin: offsetMargin, offsetVal: offsetVal }); }
+    if (isDebug) { update({ id: id, offsetMargin: offsetMargin, offsetVal: offsetVal, format: format }); }
   }
@@ -209,5 +219,3 @@
         // can't enable an unready scroller
-        console.error(
-          "scrollama error: enable() called before scroller was ready"
-        );
+        err("scrollama error: enable() called before scroller was ready");
         isEnabled = false;
@@ -590,3 +598,3 @@ return; // all is not well, don't set the requested state
     if (!stepEl.length) {
-      console.error("scrollama error: no step elements");
+      err("no step elements");
       return S;
@@ -650,20 +658,23 @@ }
   S.offsetTrigger = function (x) {
-    if (x && !isNaN(x)) {
-      if (x > 1)
-        { console.error(
-          "scrollama error: offset value is greater than 1. Fallbacks to 1."
-        ); }
-      if (x < 0)
-        { console.error(
-          "scrollama error: offset value is lower than 0. Fallbacks to 0."
-        ); }
+    if (x === null) { return offsetVal; }
+
+    if (typeof x === "number") {
+      format = "percent";
+      if (x > 1) { err("offset value is greater than 1. Fallback to 1."); }
+      if (x < 0) { err("offset value is lower than 0. Fallback to 0."); }
       offsetVal = Math.min(Math.max(0, x), 1);
-      return S;
+    } else if (typeof x === "string" && x.indexOf("px") > 0) {
+      var v = +x.replace("px", "");
+      if (!isNaN(v)) {
+        format = "pixels";
+        offsetVal = v;
+      } else {
+        err("offset value must be in 'px' format. Fallback to 0.5.");
+        offsetVal = 0.5;
+      }
+    } else {
+      err("offset value does not include 'px'. Fallback to 0.5.");
+      offsetVal = 0.5;
     }
-    if (isNaN(x)) {
-      console.error(
-        "scrollama error: offset value is not a number. Fallbacks to 0."
-      );
-    }
-    return offsetVal;
+    return S;
   };
@@ -673,3 +684,3 @@
     if (typeof f === "function") { cb.stepEnter = f; }
-    else { console.error("scrollama error: onStepEnter requires a function"); }
+    else { err("onStepEnter requires a function"); }
     return S;
@@ -680,3 +691,3 @@ };
     if (typeof f === "function") { cb.stepExit = f; }
-    else { console.error("scrollama error: onStepExit requires a function"); }
+    else { err("onStepExit requires a function"); }
     return S;
@@ -687,3 +698,3 @@ };
     if (typeof f === "function") { cb.stepProgress = f; }
-    else { console.error("scrollama error: onStepProgress requires a function"); }
+    else { err("onStepProgress requires a function"); }
     return S;
@@ -690,0 +701,0 @@ };

build/scrollama.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollama=t()}(this,function(){"use strict";function e(e){return"scrollama__debug-offset--"+e}function t(t){!function(t){var n=t.id,r=t.offsetVal,o=t.stepClass,i=document.createElement("div");i.id=e(n),i.className="scrollama__debug-offset",i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerText='".'+o+'" trigger: '+r,s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:t.id,offsetVal:t.offsetVal,stepClass:t.stepEl[0].className})}function n(e){var t=e.id,n=e.index,r=e.state,o="scrollama__debug-step--"+t+"-"+n,i=document.getElementById(o+"_above"),s=document.getElementById(o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var r=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],o={},i={},s=null,a=[],c=[],l=[],f=[],u=0,d=0,p=0,v=0,g=0,m=0,w=!1,b=!1,x=!1,h=!1,y=!1,E=!1,I="down",M=[];function A(){o={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},i={}}function C(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function O(e){return+e.getAttribute("data-scrollama-index")}function B(){window.pageYOffset>g?I="down":window.pageYOffset<g&&(I="up"),g=window.pageYOffset}function H(e){i[e]&&i[e].forEach(function(e){return e.disconnect()})}function N(){var t,n;p=window.innerHeight,t=document.body,n=document.documentElement,v=Math.max(t.scrollHeight,t.offsetHeight,n.clientHeight,n.scrollHeight,n.offsetHeight),d=u*p,w&&(c=a.map(function(e){return e.getBoundingClientRect().height}),l=a.map(C),b&&z()),x&&function(t){var n=t.id,r=t.offsetMargin,o=e(n);document.getElementById(o).style.top=r+"px"}({id:s,stepOffsetHeight:c,offsetMargin:d,offsetVal:u})}function S(e){if(e&&!b){if(!w)return console.error("scrollama error: enable() called before scroller was ready"),void(b=!1);z()}!e&&b&&r.forEach(H),b=e}function _(e,t){var n=O(e);void 0!==t&&(f[n].progress=t);var r={element:e,index:n,progress:f[n].progress};"enter"===f[n].state&&o.stepProgress(r)}function k(e,t){if("above"===t)for(var n=0;n<e;n+=1){var r=f[n];"enter"!==r.state&&"down"!==r.direction?(P(a[n],"down",!1),R(a[n],"down")):"enter"===r.state&&R(a[n],"down")}else if("below"===t)for(var o=f.length-1;o>e;o-=1){var i=f[o];"enter"===i.state&&R(a[o],"up"),"down"===i.direction&&(P(a[o],"up",!1),R(a[o],"up"))}}function P(e,t,r){void 0===r&&(r=!0);var i=O(e),a={element:e,index:i,direction:t};f[i].direction=t,f[i].state="enter",y&&r&&"down"===t&&k(i,"above"),y&&r&&"up"===t&&k(i,"below"),o.stepEnter&&!M[i]&&(o.stepEnter(a,f),x&&n({id:s,index:i,state:"enter"}),E&&(M[i]=!0)),h&&_(e)}function R(e,t){var r=O(e),i={element:e,index:r,direction:t};h&&("down"===t&&f[r].progress<1?_(e,1):"up"===t&&f[r].progress>0&&_(e,0)),f[r].direction=t,f[r].state="exit",o.stepExit(i,f),x&&n({id:s,index:r,state:"exit"})}function T(e){var t=e[0];B();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-d,c=s-d,l=O(o),u=f[l];n&&a<=0&&c>=0&&"down"===I&&"enter"!==u.state&&P(o,I),!n&&a>0&&"up"===I&&"enter"===u.state&&R(o,I)}function Y(e){var t=e[0];B();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-d,c=s-d,l=O(o),u=f[l];n&&a<=0&&c>=0&&"up"===I&&"enter"!==u.state&&P(o,I),!n&&c<0&&"down"===I&&"enter"===u.state&&R(o,I)}function q(e){var t=e[0];B();var n=t.isIntersecting,r=t.target,o=O(r),i=f[o];n&&"down"===I&&"down"!==i.direction&&"enter"!==i.state&&(P(r,"down"),R(r,"down"))}function V(e){var t=e[0];B();var n=t.isIntersecting,r=t.target,o=O(r),i=f[o];n&&"up"===I&&"down"===i.direction&&"enter"!==i.state&&(P(r,"up"),R(r,"up"))}function F(e){var t=e[0];B();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-d>=0&&_(i,+r)}function j(){i.stepProgress=a.map(function(e,t){var n=c[t]-d+"px 0px "+(-p+d)+"px 0px",r=function(e){for(var t=Math.ceil(e/m),n=[],r=1/t,o=0;o<t;o+=1)n.push(o*r);return n}(c[t]),o=new IntersectionObserver(F,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){r.forEach(H),i.viewportAbove=a.map(function(e,t){var n=v-l[t],r=d-p-c[t],o=new IntersectionObserver(q,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),i.viewportBelow=a.map(function(e,t){var n=-d-c[t],r=d-p+c[t]+v,o=new IntersectionObserver(V,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),i.stepAbove=a.map(function(e,t){var n=-d+c[t],r=new IntersectionObserver(T,{rootMargin:n+"px 0px "+(d-p)+"px 0px"});return r.observe(e),r}),i.stepBelow=a.map(function(e,t){var n=-d,r=d-p+c[t],o=new IntersectionObserver(Y,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),h&&j()}function D(e){return!(!e||1!==e.nodeType)&&(function(e){var t=window.getComputedStyle(e);return("scroll"===t.overflowY||"auto"===t.overflowY)&&e.scrollHeight>e.clientHeight}(e)?e:D(e.parentNode))}var L={};return L.setup=function(e){var n=e.step,r=e.offset;void 0===r&&(r=.5);var o=e.progress;void 0===o&&(o=!1);var i=e.threshold;void 0===i&&(i=4);var c=e.debug;void 0===c&&(c=!1);var l=e.order;void 0===l&&(l=!0);var d,p,v,g,b,I=e.once;if(void 0===I&&(I=!1),A(),p=(d="abcdefghijklmnopqrstuv").length,v=Date.now(),s=""+[0,0,0].map(function(e){return d[Math.floor(Math.random()*p)]}).join("")+v,g=n,void 0===b&&(b=document),!(a="string"==typeof g?Array.from(b.querySelectorAll(g)):g instanceof Element?[g]:g instanceof NodeList?Array.from(g):g instanceof Array?g:[]).length)return console.error("scrollama error: no step elements"),L;var M=a.reduce(function(e,t){return e||D(t.parentNode)},!1);return M&&console.error("scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.",M),x=c,h=o,y=l,E=I,L.offsetTrigger(r),m=Math.max(1,+i),w=!0,x&&t({id:s,stepEl:a,offsetVal:u}),a.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),f=a.map(function(){return{direction:null,state:null,progress:0}}),N(),L.enable(),L},L.resize=function(){return N(),L},L.enable=function(){return S(!0),L},L.disable=function(){return S(!1),L},L.destroy=function(){S(!1),A()},L.offsetTrigger=function(e){return e&&!isNaN(e)?(e>1&&console.error("scrollama error: offset value is greater than 1. Fallbacks to 1."),e<0&&console.error("scrollama error: offset value is lower than 0. Fallbacks to 0."),u=Math.min(Math.max(0,e),1),L):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),u)},L.onStepEnter=function(e){return"function"==typeof e?o.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),L},L.onStepExit=function(e){return"function"==typeof e?o.stepExit=e:console.error("scrollama error: onStepExit requires a function"),L},L.onStepProgress=function(e){return"function"==typeof e?o.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),L},L}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollama=t()}(this,function(){"use strict";function e(e){return"scrollama__debug-offset--"+e}function t(t){!function(t){var n=t.id,o=t.offsetVal,r=t.stepClass,i=document.createElement("div");i.id=e(n),i.className="scrollama__debug-offset",i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerHTML='".'+r+'" trigger: <span>'+o+"</span>",s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:t.id,offsetVal:t.offsetVal,stepClass:t.stepEl[0].className})}function n(e){var t=e.id,n=e.index,o=e.state,r="scrollama__debug-step--"+t+"-"+n,i=document.getElementById(r+"_above"),s=document.getElementById(r+"_below"),a="enter"===o?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var o=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],r={},i={},s=null,a=[],f=[],l=[],c=[],u=0,p=0,d=0,v=0,g=0,m=0,x=!1,b=!1,w=!1,h=!1,y=!1,E=!1,M="down",I="percent",A=[];function C(e){console.error("scrollama error: "+e)}function O(){r={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},i={}}function S(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function B(e){return+e.getAttribute("data-scrollama-index")}function H(){window.pageYOffset>g?M="down":window.pageYOffset<g&&(M="up"),g=window.pageYOffset}function k(e){i[e]&&i[e].forEach(function(e){return e.disconnect()})}function _(){var t,n;d=window.innerHeight,t=document.body,n=document.documentElement,v=Math.max(t.scrollHeight,t.offsetHeight,n.clientHeight,n.scrollHeight,n.offsetHeight),p=u*("pixels"===I?1:d),x&&(f=a.map(function(e){return e.getBoundingClientRect().height}),l=a.map(S),b&&D()),w&&function(t){var n=t.id,o=t.offsetMargin,r=t.offsetVal,i="pixels"===t.format?"px":"",s=e(n),a=document.getElementById(s);a.style.top=o+"px",a.querySelector("span").innerText=""+r+i}({id:s,offsetMargin:p,offsetVal:u,format:I})}function N(e){if(e&&!b){if(!x)return C("scrollama error: enable() called before scroller was ready"),void(b=!1);D()}!e&&b&&o.forEach(k),b=e}function P(e,t){var n=B(e);void 0!==t&&(c[n].progress=t);var o={element:e,index:n,progress:c[n].progress};"enter"===c[n].state&&r.stepProgress(o)}function R(e,t){if("above"===t)for(var n=0;n<e;n+=1){var o=c[n];"enter"!==o.state&&"down"!==o.direction?(T(a[n],"down",!1),q(a[n],"down")):"enter"===o.state&&q(a[n],"down")}else if("below"===t)for(var r=c.length-1;r>e;r-=1){var i=c[r];"enter"===i.state&&q(a[r],"up"),"down"===i.direction&&(T(a[r],"up",!1),q(a[r],"up"))}}function T(e,t,o){void 0===o&&(o=!0);var i=B(e),a={element:e,index:i,direction:t};c[i].direction=t,c[i].state="enter",y&&o&&"down"===t&&R(i,"above"),y&&o&&"up"===t&&R(i,"below"),r.stepEnter&&!A[i]&&(r.stepEnter(a,c),w&&n({id:s,index:i,state:"enter"}),E&&(A[i]=!0)),h&&P(e)}function q(e,t){var o=B(e),i={element:e,index:o,direction:t};h&&("down"===t&&c[o].progress<1?P(e,1):"up"===t&&c[o].progress>0&&P(e,0)),c[o].direction=t,c[o].state="exit",r.stepExit(i,c),w&&n({id:s,index:o,state:"exit"})}function V(e){var t=e[0];H();var n=t.isIntersecting,o=t.boundingClientRect,r=t.target,i=o.top,s=o.bottom,a=i-p,f=s-p,l=B(r),u=c[l];n&&a<=0&&f>=0&&"down"===M&&"enter"!==u.state&&T(r,M),!n&&a>0&&"up"===M&&"enter"===u.state&&q(r,M)}function Y(e){var t=e[0];H();var n=t.isIntersecting,o=t.boundingClientRect,r=t.target,i=o.top,s=o.bottom,a=i-p,f=s-p,l=B(r),u=c[l];n&&a<=0&&f>=0&&"up"===M&&"enter"!==u.state&&T(r,M),!n&&f<0&&"down"===M&&"enter"===u.state&&q(r,M)}function F(e){var t=e[0];H();var n=t.isIntersecting,o=t.target,r=B(o),i=c[r];n&&"down"===M&&"down"!==i.direction&&"enter"!==i.state&&(T(o,"down"),q(o,"down"))}function j(e){var t=e[0];H();var n=t.isIntersecting,o=t.target,r=B(o),i=c[r];n&&"up"===M&&"down"===i.direction&&"enter"!==i.state&&(T(o,"up"),q(o,"up"))}function z(e){var t=e[0];H();var n=t.isIntersecting,o=t.intersectionRatio,r=t.boundingClientRect,i=t.target,s=r.bottom;n&&s-p>=0&&P(i,+o)}function L(){i.stepProgress=a.map(function(e,t){var n=f[t]-p+"px 0px "+(-d+p)+"px 0px",o=function(e){for(var t=Math.ceil(e/m),n=[],o=1/t,r=0;r<t;r+=1)n.push(r*o);return n}(f[t]),r=new IntersectionObserver(z,{rootMargin:n,threshold:o});return r.observe(e),r})}function D(){o.forEach(k),i.viewportAbove=a.map(function(e,t){var n=v-l[t],o=p-d-f[t],r=new IntersectionObserver(F,{rootMargin:n+"px 0px "+o+"px 0px"});return r.observe(e),r}),i.viewportBelow=a.map(function(e,t){var n=-p-f[t],o=p-d+f[t]+v,r=new IntersectionObserver(j,{rootMargin:n+"px 0px "+o+"px 0px"});return r.observe(e),r}),i.stepAbove=a.map(function(e,t){var n=-p+f[t],o=new IntersectionObserver(V,{rootMargin:n+"px 0px "+(p-d)+"px 0px"});return o.observe(e),o}),i.stepBelow=a.map(function(e,t){var n=-p,o=p-d+f[t],r=new IntersectionObserver(Y,{rootMargin:n+"px 0px "+o+"px 0px"});return r.observe(e),r}),h&&L()}function G(e){return!(!e||1!==e.nodeType)&&(function(e){var t=window.getComputedStyle(e);return("scroll"===t.overflowY||"auto"===t.overflowY)&&e.scrollHeight>e.clientHeight}(e)?e:G(e.parentNode))}var J={};return J.setup=function(e){var n=e.step,o=e.offset;void 0===o&&(o=.5);var r=e.progress;void 0===r&&(r=!1);var i=e.threshold;void 0===i&&(i=4);var f=e.debug;void 0===f&&(f=!1);var l=e.order;void 0===l&&(l=!0);var p,d,v,g,b,M=e.once;if(void 0===M&&(M=!1),O(),d=(p="abcdefghijklmnopqrstuv").length,v=Date.now(),s=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*d)]}).join("")+v,g=n,void 0===b&&(b=document),!(a="string"==typeof g?Array.from(b.querySelectorAll(g)):g instanceof Element?[g]:g instanceof NodeList?Array.from(g):g instanceof Array?g:[]).length)return C("no step elements"),J;var I=a.reduce(function(e,t){return e||G(t.parentNode)},!1);return I&&console.error("scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.",I),w=f,h=r,y=l,E=M,J.offsetTrigger(o),m=Math.max(1,+i),x=!0,w&&t({id:s,stepEl:a,offsetVal:u}),a.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),c=a.map(function(){return{direction:null,state:null,progress:0}}),_(),J.enable(),J},J.resize=function(){return _(),J},J.enable=function(){return N(!0),J},J.disable=function(){return N(!1),J},J.destroy=function(){N(!1),O()},J.offsetTrigger=function(e){if(null===e)return u;if("number"==typeof e)I="percent",e>1&&C("offset value is greater than 1. Fallback to 1."),e<0&&C("offset value is lower than 0. Fallback to 0."),u=Math.min(Math.max(0,e),1);else if("string"==typeof e&&e.indexOf("px")>0){var t=+e.replace("px","");isNaN(t)?(C("offset value must be in 'px' format. Fallback to 0.5."),u=.5):(I="pixels",u=t)}else C("offset value does not include 'px'. Fallback to 0.5."),u=.5;return J},J.onStepEnter=function(e){return"function"==typeof e?r.stepEnter=e:C("onStepEnter requires a function"),J},J.onStepExit=function(e){return"function"==typeof e?r.stepExit=e:C("onStepExit requires a function"),J},J.onStepProgress=function(e){return"function"==typeof e?r.stepProgress=e:C("onStepProgress requires a function"),J},J}});

docs/scrollama.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollama=t()}(this,function(){"use strict";function e(e){return"scrollama__debug-offset--"+e}function t(t){!function(t){var n=t.id,r=t.offsetVal,o=t.stepClass,i=document.createElement("div");i.id=e(n),i.className="scrollama__debug-offset",i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerText='".'+o+'" trigger: '+r,s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:t.id,offsetVal:t.offsetVal,stepClass:t.stepEl[0].className})}function n(e){var t=e.id,n=e.index,r=e.state,o="scrollama__debug-step--"+t+"-"+n,i=document.getElementById(o+"_above"),s=document.getElementById(o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var r=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],o={},i={},s=null,a=[],c=[],l=[],f=[],u=0,d=0,p=0,v=0,g=0,m=0,w=!1,b=!1,x=!1,h=!1,y=!1,E=!1,I="down",M=[];function A(){o={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},i={}}function C(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function O(e){return+e.getAttribute("data-scrollama-index")}function B(){window.pageYOffset>g?I="down":window.pageYOffset<g&&(I="up"),g=window.pageYOffset}function H(e){i[e]&&i[e].forEach(function(e){return e.disconnect()})}function N(){var t,n;p=window.innerHeight,t=document.body,n=document.documentElement,v=Math.max(t.scrollHeight,t.offsetHeight,n.clientHeight,n.scrollHeight,n.offsetHeight),d=u*p,w&&(c=a.map(function(e){return e.getBoundingClientRect().height}),l=a.map(C),b&&z()),x&&function(t){var n=t.id,r=t.offsetMargin,o=e(n);document.getElementById(o).style.top=r+"px"}({id:s,stepOffsetHeight:c,offsetMargin:d,offsetVal:u})}function S(e){if(e&&!b){if(!w)return console.error("scrollama error: enable() called before scroller was ready"),void(b=!1);z()}!e&&b&&r.forEach(H),b=e}function _(e,t){var n=O(e);void 0!==t&&(f[n].progress=t);var r={element:e,index:n,progress:f[n].progress};"enter"===f[n].state&&o.stepProgress(r)}function k(e,t){if("above"===t)for(var n=0;n<e;n+=1){var r=f[n];"enter"!==r.state&&"down"!==r.direction?(P(a[n],"down",!1),R(a[n],"down")):"enter"===r.state&&R(a[n],"down")}else if("below"===t)for(var o=f.length-1;o>e;o-=1){var i=f[o];"enter"===i.state&&R(a[o],"up"),"down"===i.direction&&(P(a[o],"up",!1),R(a[o],"up"))}}function P(e,t,r){void 0===r&&(r=!0);var i=O(e),a={element:e,index:i,direction:t};f[i].direction=t,f[i].state="enter",y&&r&&"down"===t&&k(i,"above"),y&&r&&"up"===t&&k(i,"below"),o.stepEnter&&!M[i]&&(o.stepEnter(a,f),x&&n({id:s,index:i,state:"enter"}),E&&(M[i]=!0)),h&&_(e)}function R(e,t){var r=O(e),i={element:e,index:r,direction:t};h&&("down"===t&&f[r].progress<1?_(e,1):"up"===t&&f[r].progress>0&&_(e,0)),f[r].direction=t,f[r].state="exit",o.stepExit(i,f),x&&n({id:s,index:r,state:"exit"})}function T(e){var t=e[0];B();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-d,c=s-d,l=O(o),u=f[l];n&&a<=0&&c>=0&&"down"===I&&"enter"!==u.state&&P(o,I),!n&&a>0&&"up"===I&&"enter"===u.state&&R(o,I)}function Y(e){var t=e[0];B();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-d,c=s-d,l=O(o),u=f[l];n&&a<=0&&c>=0&&"up"===I&&"enter"!==u.state&&P(o,I),!n&&c<0&&"down"===I&&"enter"===u.state&&R(o,I)}function q(e){var t=e[0];B();var n=t.isIntersecting,r=t.target,o=O(r),i=f[o];n&&"down"===I&&"down"!==i.direction&&"enter"!==i.state&&(P(r,"down"),R(r,"down"))}function V(e){var t=e[0];B();var n=t.isIntersecting,r=t.target,o=O(r),i=f[o];n&&"up"===I&&"down"===i.direction&&"enter"!==i.state&&(P(r,"up"),R(r,"up"))}function F(e){var t=e[0];B();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-d>=0&&_(i,+r)}function j(){i.stepProgress=a.map(function(e,t){var n=c[t]-d+"px 0px "+(-p+d)+"px 0px",r=function(e){for(var t=Math.ceil(e/m),n=[],r=1/t,o=0;o<t;o+=1)n.push(o*r);return n}(c[t]),o=new IntersectionObserver(F,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){r.forEach(H),i.viewportAbove=a.map(function(e,t){var n=v-l[t],r=d-p-c[t],o=new IntersectionObserver(q,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),i.viewportBelow=a.map(function(e,t){var n=-d-c[t],r=d-p+c[t]+v,o=new IntersectionObserver(V,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),i.stepAbove=a.map(function(e,t){var n=-d+c[t],r=new IntersectionObserver(T,{rootMargin:n+"px 0px "+(d-p)+"px 0px"});return r.observe(e),r}),i.stepBelow=a.map(function(e,t){var n=-d,r=d-p+c[t],o=new IntersectionObserver(Y,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),h&&j()}function D(e){return!(!e||1!==e.nodeType)&&(function(e){var t=window.getComputedStyle(e);return("scroll"===t.overflowY||"auto"===t.overflowY)&&e.scrollHeight>e.clientHeight}(e)?e:D(e.parentNode))}var L={};return L.setup=function(e){var n=e.step,r=e.offset;void 0===r&&(r=.5);var o=e.progress;void 0===o&&(o=!1);var i=e.threshold;void 0===i&&(i=4);var c=e.debug;void 0===c&&(c=!1);var l=e.order;void 0===l&&(l=!0);var d,p,v,g,b,I=e.once;if(void 0===I&&(I=!1),A(),p=(d="abcdefghijklmnopqrstuv").length,v=Date.now(),s=""+[0,0,0].map(function(e){return d[Math.floor(Math.random()*p)]}).join("")+v,g=n,void 0===b&&(b=document),!(a="string"==typeof g?Array.from(b.querySelectorAll(g)):g instanceof Element?[g]:g instanceof NodeList?Array.from(g):g instanceof Array?g:[]).length)return console.error("scrollama error: no step elements"),L;var M=a.reduce(function(e,t){return e||D(t.parentNode)},!1);return M&&console.error("scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.",M),x=c,h=o,y=l,E=I,L.offsetTrigger(r),m=Math.max(1,+i),w=!0,x&&t({id:s,stepEl:a,offsetVal:u}),a.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),f=a.map(function(){return{direction:null,state:null,progress:0}}),N(),L.enable(),L},L.resize=function(){return N(),L},L.enable=function(){return S(!0),L},L.disable=function(){return S(!1),L},L.destroy=function(){S(!1),A()},L.offsetTrigger=function(e){return e&&!isNaN(e)?(e>1&&console.error("scrollama error: offset value is greater than 1. Fallbacks to 1."),e<0&&console.error("scrollama error: offset value is lower than 0. Fallbacks to 0."),u=Math.min(Math.max(0,e),1),L):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),u)},L.onStepEnter=function(e){return"function"==typeof e?o.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),L},L.onStepExit=function(e){return"function"==typeof e?o.stepExit=e:console.error("scrollama error: onStepExit requires a function"),L},L.onStepProgress=function(e){return"function"==typeof e?o.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),L},L}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollama=t()}(this,function(){"use strict";function e(e){return"scrollama__debug-offset--"+e}function t(t){!function(t){var n=t.id,o=t.offsetVal,r=t.stepClass,i=document.createElement("div");i.id=e(n),i.className="scrollama__debug-offset",i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerHTML='".'+r+'" trigger: <span>'+o+"</span>",s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:t.id,offsetVal:t.offsetVal,stepClass:t.stepEl[0].className})}function n(e){var t=e.id,n=e.index,o=e.state,r="scrollama__debug-step--"+t+"-"+n,i=document.getElementById(r+"_above"),s=document.getElementById(r+"_below"),a="enter"===o?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var o=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],r={},i={},s=null,a=[],f=[],l=[],c=[],u=0,p=0,d=0,v=0,g=0,m=0,x=!1,b=!1,w=!1,h=!1,y=!1,E=!1,M="down",I="percent",A=[];function C(e){console.error("scrollama error: "+e)}function O(){r={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},i={}}function S(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function B(e){return+e.getAttribute("data-scrollama-index")}function H(){window.pageYOffset>g?M="down":window.pageYOffset<g&&(M="up"),g=window.pageYOffset}function k(e){i[e]&&i[e].forEach(function(e){return e.disconnect()})}function _(){var t,n;d=window.innerHeight,t=document.body,n=document.documentElement,v=Math.max(t.scrollHeight,t.offsetHeight,n.clientHeight,n.scrollHeight,n.offsetHeight),p=u*("pixels"===I?1:d),x&&(f=a.map(function(e){return e.getBoundingClientRect().height}),l=a.map(S),b&&D()),w&&function(t){var n=t.id,o=t.offsetMargin,r=t.offsetVal,i="pixels"===t.format?"px":"",s=e(n),a=document.getElementById(s);a.style.top=o+"px",a.querySelector("span").innerText=""+r+i}({id:s,offsetMargin:p,offsetVal:u,format:I})}function N(e){if(e&&!b){if(!x)return C("scrollama error: enable() called before scroller was ready"),void(b=!1);D()}!e&&b&&o.forEach(k),b=e}function P(e,t){var n=B(e);void 0!==t&&(c[n].progress=t);var o={element:e,index:n,progress:c[n].progress};"enter"===c[n].state&&r.stepProgress(o)}function R(e,t){if("above"===t)for(var n=0;n<e;n+=1){var o=c[n];"enter"!==o.state&&"down"!==o.direction?(T(a[n],"down",!1),q(a[n],"down")):"enter"===o.state&&q(a[n],"down")}else if("below"===t)for(var r=c.length-1;r>e;r-=1){var i=c[r];"enter"===i.state&&q(a[r],"up"),"down"===i.direction&&(T(a[r],"up",!1),q(a[r],"up"))}}function T(e,t,o){void 0===o&&(o=!0);var i=B(e),a={element:e,index:i,direction:t};c[i].direction=t,c[i].state="enter",y&&o&&"down"===t&&R(i,"above"),y&&o&&"up"===t&&R(i,"below"),r.stepEnter&&!A[i]&&(r.stepEnter(a,c),w&&n({id:s,index:i,state:"enter"}),E&&(A[i]=!0)),h&&P(e)}function q(e,t){var o=B(e),i={element:e,index:o,direction:t};h&&("down"===t&&c[o].progress<1?P(e,1):"up"===t&&c[o].progress>0&&P(e,0)),c[o].direction=t,c[o].state="exit",r.stepExit(i,c),w&&n({id:s,index:o,state:"exit"})}function V(e){var t=e[0];H();var n=t.isIntersecting,o=t.boundingClientRect,r=t.target,i=o.top,s=o.bottom,a=i-p,f=s-p,l=B(r),u=c[l];n&&a<=0&&f>=0&&"down"===M&&"enter"!==u.state&&T(r,M),!n&&a>0&&"up"===M&&"enter"===u.state&&q(r,M)}function Y(e){var t=e[0];H();var n=t.isIntersecting,o=t.boundingClientRect,r=t.target,i=o.top,s=o.bottom,a=i-p,f=s-p,l=B(r),u=c[l];n&&a<=0&&f>=0&&"up"===M&&"enter"!==u.state&&T(r,M),!n&&f<0&&"down"===M&&"enter"===u.state&&q(r,M)}function F(e){var t=e[0];H();var n=t.isIntersecting,o=t.target,r=B(o),i=c[r];n&&"down"===M&&"down"!==i.direction&&"enter"!==i.state&&(T(o,"down"),q(o,"down"))}function j(e){var t=e[0];H();var n=t.isIntersecting,o=t.target,r=B(o),i=c[r];n&&"up"===M&&"down"===i.direction&&"enter"!==i.state&&(T(o,"up"),q(o,"up"))}function z(e){var t=e[0];H();var n=t.isIntersecting,o=t.intersectionRatio,r=t.boundingClientRect,i=t.target,s=r.bottom;n&&s-p>=0&&P(i,+o)}function L(){i.stepProgress=a.map(function(e,t){var n=f[t]-p+"px 0px "+(-d+p)+"px 0px",o=function(e){for(var t=Math.ceil(e/m),n=[],o=1/t,r=0;r<t;r+=1)n.push(r*o);return n}(f[t]),r=new IntersectionObserver(z,{rootMargin:n,threshold:o});return r.observe(e),r})}function D(){o.forEach(k),i.viewportAbove=a.map(function(e,t){var n=v-l[t],o=p-d-f[t],r=new IntersectionObserver(F,{rootMargin:n+"px 0px "+o+"px 0px"});return r.observe(e),r}),i.viewportBelow=a.map(function(e,t){var n=-p-f[t],o=p-d+f[t]+v,r=new IntersectionObserver(j,{rootMargin:n+"px 0px "+o+"px 0px"});return r.observe(e),r}),i.stepAbove=a.map(function(e,t){var n=-p+f[t],o=new IntersectionObserver(V,{rootMargin:n+"px 0px "+(p-d)+"px 0px"});return o.observe(e),o}),i.stepBelow=a.map(function(e,t){var n=-p,o=p-d+f[t],r=new IntersectionObserver(Y,{rootMargin:n+"px 0px "+o+"px 0px"});return r.observe(e),r}),h&&L()}function G(e){return!(!e||1!==e.nodeType)&&(function(e){var t=window.getComputedStyle(e);return("scroll"===t.overflowY||"auto"===t.overflowY)&&e.scrollHeight>e.clientHeight}(e)?e:G(e.parentNode))}var J={};return J.setup=function(e){var n=e.step,o=e.offset;void 0===o&&(o=.5);var r=e.progress;void 0===r&&(r=!1);var i=e.threshold;void 0===i&&(i=4);var f=e.debug;void 0===f&&(f=!1);var l=e.order;void 0===l&&(l=!0);var p,d,v,g,b,M=e.once;if(void 0===M&&(M=!1),O(),d=(p="abcdefghijklmnopqrstuv").length,v=Date.now(),s=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*d)]}).join("")+v,g=n,void 0===b&&(b=document),!(a="string"==typeof g?Array.from(b.querySelectorAll(g)):g instanceof Element?[g]:g instanceof NodeList?Array.from(g):g instanceof Array?g:[]).length)return C("no step elements"),J;var I=a.reduce(function(e,t){return e||G(t.parentNode)},!1);return I&&console.error("scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.",I),w=f,h=r,y=l,E=M,J.offsetTrigger(o),m=Math.max(1,+i),x=!0,w&&t({id:s,stepEl:a,offsetVal:u}),a.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),c=a.map(function(){return{direction:null,state:null,progress:0}}),_(),J.enable(),J},J.resize=function(){return _(),J},J.enable=function(){return N(!0),J},J.disable=function(){return N(!1),J},J.destroy=function(){N(!1),O()},J.offsetTrigger=function(e){if(null===e)return u;if("number"==typeof e)I="percent",e>1&&C("offset value is greater than 1. Fallback to 1."),e<0&&C("offset value is lower than 0. Fallback to 0."),u=Math.min(Math.max(0,e),1);else if("string"==typeof e&&e.indexOf("px")>0){var t=+e.replace("px","");isNaN(t)?(C("offset value must be in 'px' format. Fallback to 0.5."),u=.5):(I="pixels",u=t)}else C("offset value does not include 'px'. Fallback to 0.5."),u=.5;return J},J.onStepEnter=function(e){return"function"==typeof e?r.stepEnter=e:C("onStepEnter requires a function"),J},J.onStepExit=function(e){return"function"==typeof e?r.stepExit=e:C("onStepExit requires a function"),J},J.onStepProgress=function(e){return"function"==typeof e?r.stepProgress=e:C("onStepProgress requires a function"),J},J}});

package.json

 {
 	"name": "scrollama",
-	"version": "2.1.6",
+	"version": "2.2.0",
 	"description": "Lightweight scrollytelling library using IntersectionObserver",
@@ -5,0 +5,0 @@ "main": "build/scrollama.js",

README.md

@@ -48,3 +48,3 @@ ###### scrollama.js
 ```html
-<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
+<script src="https://unpkg.com/intersection-observer"></script>
 <script src="https://unpkg.com/scrollama"></script>
@@ -62,5 +62,5 @@ ```
 ```js
-import 'intersection-observer';
-import scrollama from 'scrollama'; // or...
-const scrollama = require('scrollama');
+import "intersection-observer";
+import scrollama from "scrollama"; // or...
+const scrollama = require("scrollama");
 ```
@@ -94,3 +94,3 @@
   .setup({
-    step: '.step'
+    step: ".step"
   })
@@ -105,3 +105,3 @@ .onStepEnter(response => {
 // setup resize event
-window.addEventListener('resize', scroller.resize);
+window.addEventListener("resize", scroller.resize);
 ```
@@ -117,4 +117,3 @@
   **required**
-- `offset` (number, 0 - 1): How far from the top of the viewport to trigger a
-  step. **(default: 0.5)**
+- `offset` (number 0 - 1, or string with "px"): How far from the top of the viewport to trigger a step. **(default: 0.5) (middle of screen)**
 - `progress` (boolean): Whether to fire incremental step progress updates or
@@ -166,5 +165,5 @@ not. **(default: false)**
 
-#### scrollama.offsetTrigger([number])
+#### scrollama.offsetTrigger([number or string])
 
-Get or set the offset percentage. Value must be between 0-1.
+Get or set the offset percentage. Value must be between 0-1 (where 0 = top of viewport, 1 = bottom), or a string that includes "px" (e.g., "200px"). If set, returns the scrollama instance.
 
@@ -213,19 +212,20 @@ #### scrollama.resize()
 
-### Contributors 
-* [russellgoldenberg](https://github.com/russellgoldenberg)
-* [gabrielflorit](https://github.com/gabrielflorit)
-* [tbroadley](https://github.com/tbroadley)
-* [jsonkao](https://github.com/jsonkao)
-* [ianmcampbell](https://github.com/iainmcampbell)
-* [ddazal](https://github.com/ddazal)
-* [albinotonnina](https://github.com/albinotonnina)
-* [SidKwok](https://github.com/SidKwok)
-* [Eelsie](https://github.com/Eelsie)
-* [jonnyscholes](https://github.com/jonnyscholes)
-* [pldg](https://github.com/pldg)
-* [andysongs](https://github.com/andysongs)
-* [Ryshackleton](https://github.com/Ryshackleton)
-* [steven0811](https://github.com/steven0811)
-* [smnarnold](https://github.com/smnarnold)
+### Contributors
 
+- [russellgoldenberg](https://github.com/russellgoldenberg)
+- [gabrielflorit](https://github.com/gabrielflorit)
+- [tbroadley](https://github.com/tbroadley)
+- [jsonkao](https://github.com/jsonkao)
+- [ianmcampbell](https://github.com/iainmcampbell)
+- [ddazal](https://github.com/ddazal)
+- [albinotonnina](https://github.com/albinotonnina)
+- [SidKwok](https://github.com/SidKwok)
+- [Eelsie](https://github.com/Eelsie)
+- [jonnyscholes](https://github.com/jonnyscholes)
+- [pldg](https://github.com/pldg)
+- [andysongs](https://github.com/andysongs)
+- [Ryshackleton](https://github.com/Ryshackleton)
+- [steven0811](https://github.com/steven0811)
+- [smnarnold](https://github.com/smnarnold)
+
 ### License
@@ -232,0 +232,0 @@

src/debug.js

@@ -7,20 +7,20 @@ function getOffsetId(id) {
 function setupOffset({ id, offsetVal, stepClass }) {
-  const el = document.createElement('div');
+  const el = document.createElement("div");
   el.id = getOffsetId(id);
-  el.className = 'scrollama__debug-offset';
-  el.style.position = 'fixed';
-  el.style.left = '0';
-  el.style.width = '100%';
-  el.style.height = '0';
-  el.style.borderTop = '2px dashed black';
-  el.style.zIndex = '9999';
+  el.className = "scrollama__debug-offset";
+  el.style.position = "fixed";
+  el.style.left = "0";
+  el.style.width = "100%";
+  el.style.height = "0";
+  el.style.borderTop = "2px dashed black";
+  el.style.zIndex = "9999";
 
-  const text = document.createElement('p');
-  text.innerText = `".${stepClass}" trigger: ${offsetVal}`;
-  text.style.fontSize = '12px';
-  text.style.fontFamily = 'monospace';
-  text.style.color = 'black';
-  text.style.margin = '0';
-  text.style.padding = '6px';
-  el.appendChild(text);
+  const p = document.createElement("p");
+  p.innerHTML = `".${stepClass}" trigger: <span>${offsetVal}</span>`;
+  p.style.fontSize = "12px";
+  p.style.fontFamily = "monospace";
+  p.style.color = "black";
+  p.style.margin = "0";
+  p.style.padding = "6px";
+  el.appendChild(p);
   document.body.appendChild(el);
@@ -35,6 +35,8 @@ }
 // UPDATE
-function update({ id, offsetMargin }) {
+function update({ id, offsetMargin, offsetVal, format }) {
+  const post = format === "pixels" ? "px" : "";
   const idVal = getOffsetId(id);
   const el = document.getElementById(idVal);
   el.style.top = `${offsetMargin}px`;
+  el.querySelector("span").innerText = `${offsetVal}${post}`;
 }
@@ -46,3 +48,3 @@
   const elB = document.getElementById(`${prefix}_below`);
-  const display = state === 'enter' ? 'block' : 'none';
+  const display = state === "enter" ? "block" : "none";
 
@@ -49,0 +51,0 @@ if (elA) elA.style.display = display;

src/init.js

@@ -38,2 +38,3 @@ import { selectAll } from "./dom";
   let direction = "down";
+  let format = "percent";
 
@@ -43,2 +44,6 @@ const exclude = [];
   /* HELPERS */
+  function err(msg) {
+    console.error(`scrollama error: ${msg}`);
+  }
+
   function reset() {
@@ -99,3 +104,4 @@ cb = {
 
-    offsetMargin = offsetVal * viewH;
+    const mult = format === "pixels" ? 1 : viewH;
+    offsetMargin = offsetVal * mult;
 
@@ -108,3 +114,3 @@ if (isReady) {
 
-    if (isDebug) bug.update({ id, stepOffsetHeight, offsetMargin, offsetVal });
+    if (isDebug) bug.update({ id, offsetMargin, offsetVal, format });
   }
@@ -120,5 +126,3 @@
         // can't enable an unready scroller
-        console.error(
-          "scrollama error: enable() called before scroller was ready"
-        );
+        err("scrollama error: enable() called before scroller was ready");
         isEnabled = false;
@@ -483,3 +487,3 @@ return; // all is not well, don't set the requested state
     if (!stepEl.length) {
-      console.error("scrollama error: no step elements");
+      err("no step elements");
       return S;
@@ -544,20 +548,23 @@ }
   S.offsetTrigger = x => {
-    if (x && !isNaN(x)) {
-      if (x > 1)
-        console.error(
-          "scrollama error: offset value is greater than 1. Fallbacks to 1."
-        );
-      if (x < 0)
-        console.error(
-          "scrollama error: offset value is lower than 0. Fallbacks to 0."
-        );
+    if (x === null) return offsetVal;
+
+    if (typeof x === "number") {
+      format = "percent";
+      if (x > 1) err("offset value is greater than 1. Fallback to 1.");
+      if (x < 0) err("offset value is lower than 0. Fallback to 0.");
       offsetVal = Math.min(Math.max(0, x), 1);
-      return S;
+    } else if (typeof x === "string" && x.indexOf("px") > 0) {
+      const v = +x.replace("px", "");
+      if (!isNaN(v)) {
+        format = "pixels";
+        offsetVal = v;
+      } else {
+        err("offset value must be in 'px' format. Fallback to 0.5.");
+        offsetVal = 0.5;
+      }
+    } else {
+      err("offset value does not include 'px'. Fallback to 0.5.");
+      offsetVal = 0.5;
     }
-    if (isNaN(x)) {
-      console.error(
-        "scrollama error: offset value is not a number. Fallbacks to 0."
-      );
-    }
-    return offsetVal;
+    return S;
   };
@@ -567,3 +574,3 @@
     if (typeof f === "function") cb.stepEnter = f;
-    else console.error("scrollama error: onStepEnter requires a function");
+    else err("onStepEnter requires a function");
     return S;
@@ -574,3 +581,3 @@ };
     if (typeof f === "function") cb.stepExit = f;
-    else console.error("scrollama error: onStepExit requires a function");
+    else err("onStepExit requires a function");
     return S;
@@ -581,3 +588,3 @@ };
     if (typeof f === "function") cb.stepProgress = f;
-    else console.error("scrollama error: onStepProgress requires a function");
+    else err("onStepProgress requires a function");
     return S;
@@ -584,0 +591,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

388676

increased by4.05%

Number of package files

30

increased by3.45%

Lines of code

1399

increased by1.3%

No dependency changes