reeller/dist/reeller.min.js

Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t||self).Reeller={})}(this,function(t){function e(){return e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t},e.apply(this,arguments)}function i(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,s(t,e)}function s(t,e){return s=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},s(t,e)}var n=/*#__PURE__*/function(){function t(){this.events={}}var e=t.prototype;return e.on=function(t,e){this.events[t]instanceof Array||(this.events[t]=[]),this.events[t].push(e)},e.off=function(t,e){this.events[t]=e?this.events[t].filter(function(t){return t!==e}):[]},e.trigger=function(t){var e=arguments,i=this;this.events[t]&&this.events[t].forEach(function(t){return t.call.apply(t,[i,i].concat([].slice.call(e,1)))})},t}(),r=/*#__PURE__*/function(t){function s(i){var n;return(n=t.call(this)||this).options=e({},s.defaultOptions,i),n.container="string"==typeof n.options.container?document.querySelector(n.options.container):n.options.container,n.wrapper="string"==typeof n.options.wrapper?n.container.querySelector(n.options.wrapper):n.options.wrapper||n.options.container,n.item=[],n.refresh(!1),n.options.autoUpdate?n.bindResizeObserver():n.update(),n}i(s,t);var n=s.prototype;return n.bindResizeObserver=function(){var t=this;this.resizeObserver=new ResizeObserver(function(){t.update()}),this.resizeObserver.observe(this.container)},n.addClones=function(t,e){var i;void 0===e&&(e=0);for(var s=[],n=0;n<t;n++){var r=this.item[(e+n)%this.item.length].cloneNode(!0);r.classList.add(this.options.cloneClassName),s.push(r)}(i=this.wrapper).append.apply(i,s)},n.removeClones=function(t){void 0===t&&(t=0),Array.from(this.wrapper.getElementsByClassName(this.options.cloneClassName)).slice(-t).forEach(function(t){return t.remove()})},n.setClonesCount=function(t){this.clonesCount!==t&&(this.clonesCount<t&&this.addClones(t-this.clonesCount,this.clonesCount),this.clonesCount>t&&this.removeClones(this.clonesCount-t),this.clonesCount=t)},n.getCalcData=function(){var t={clonesCount:0,clonesWidth:0,containerWidth:this.container.offsetWidth,fullWidth:0,itemWidth:[],itemsWidth:0,lastIndex:0};this.item.map(function(e){var i=window.getComputedStyle(e),s=e.offsetWidth+parseInt(i.marginLeft)+parseInt(i.marginRight);t.itemWidth.push(s),t.itemsWidth+=s});for(var e=t.itemWidth.length,i=this.options.clonesOverflow?t.containerWidth:t.containerWidth-t.itemsWidth;i>t.clonesWidth||t.clonesCount<this.options.clonesMin||this.options.clonesFinish&&t.clonesCount%e>0;)t.lastIndex=t.clonesCount%e,t.clonesWidth+=t.itemWidth[t.lastIndex],t.clonesCount++;return t.fullWidth=t.clonesWidth+t.itemsWidth,t},n.update=function(){this.calcData=this.getCalcData(),this.setClonesCount(this.calcData.clonesCount),this.trigger("update",this.calcData)},n.refresh=function(t){void 0===t&&(t=!0),this.removeClones(),this.item=Array.from(this.container.querySelectorAll(this.options.itemSelector)),this.calcData={},this.clonesCount=0,this.trigger("refresh"),t&&this.update()},n.destroy=function(t){void 0===t&&(t=!1),t&&this.removeClones(),this.resizeObserver&&this.resizeObserver.disconnect(),this.trigger("destroy")},s}(n);r.defaultOptions={container:null,wrapper:null,itemSelector:null,cloneClassName:"-clone",autoUpdate:!0,clonesOverflow:!1,clonesFinish:!1,clonesMin:0};var o=/*#__PURE__*/function(t){function s(i){var n;return(n=t.call(this)||this).options=e({},s.defaultOptions,i),n.gsap=s.gsap||window.gsap,n.paused=n.options.paused,n.createFiller(),n.createTimeline(),(n.options.autoPlay||n.options.autoStop)&&n.bindIntersectionObserver(),n.options.plugins&&n.initPlugins(),n}i(s,t),s.registerGSAP=function(t){s.gsap=t},s.use=function(){[].slice.call(arguments).forEach(function(t){var e=t.pluginName;if("string"!=typeof e)throw new TypeError("Invalid plugin. Name is required.");s.plugins[e]=t})};var n=s.prototype;return n.createFiller=function(){var t=this;this.filler=new r(this.options),this.filler.on("update",function(e,i){t.invalidate(),t.trigger("update",i)}),this.filler.on("refresh",function(){t.trigger("refresh")})},n.createTimeline=function(){var t=this;return this.tl=new this.gsap.timeline({paused:this.options.paused,reversed:this.options.reversed,repeat:-1,yoyo:!this.options.loop,onReverseComplete:function(){this.progress(1)}}),this.gsap.set(this.filler.container,{overflow:"hidden"}),this.tl.fromTo(this.filler.wrapper,{x:function(){return t.options.clonesOverflow?-t.filler.calcData.itemsWidth:-(t.filler.calcData.fullWidth-t.filler.calcData.containerWidth)}},{x:0,duration:this.options.speed,ease:this.options.ease}),this.tl.seek(this.options.seek),this.tl},n.bindIntersectionObserver=function(){var t=this;this.intersectionObserver=new IntersectionObserver(function(e){e[0].isIntersecting?t.resume():t.pause()}),this.intersectionObserver.observe(this.filler.container)},n.initPlugins=function(){this.plugin={};for(var t=0,e=Object.entries(this.options.plugins);t<e.length;t++){var i=e[t],n=i[0],r=s.plugins[n];r?this.plugin[n]=new r(this,i[1]):console.error("Plugin "+n+" not found. Make sure you register it with Reeller.use()")}},n.destroyPlugins=function(){for(var t=0,e=Object.values(this.plugin);t<e.length;t++){var i=e[t];i.destroy&&i.destroy()}},n.resume=function(){this.gsap.set(this.filler.container,{z:"0"}),this.gsap.set(this.filler.wrapper,{willChange:"transform"}),this.paused=!1,this.tl.resume(),this.trigger("resume")},n.reverse=function(t){void 0===t&&(t=!0),this.tl.reversed(t),this.resume(),this.trigger("reverse",t)},n.pause=function(){this.gsap.set(this.filler.container,{clearProps:"z"}),this.gsap.set(this.filler.wrapper,{willChange:"auto"}),this.paused=!0,this.tl.pause(),this.trigger("pause")},n.invalidate=function(){this.tl.invalidate(),this.trigger("invalidate")},n.update=function(){this.filler.update()},n.refresh=function(t){void 0===t&&(t=!0),this.filler.refresh(t)},n.destroy=function(t,e){void 0===t&&(t=!1),void 0===e&&(e=!1),this.intersectionObserver&&this.intersectionObserver.disconnect(),this.options.plugins&&this.destroyPlugins(),this.tl.kill(),this.filler.destroy(t),e&&(this.gsap.set(this.filler.container,{clearProps:"overflow"}),this.gsap.set(this.filler.wrapper,{clearProps:"x,willChange"})),this.trigger("destroy")},s}(n);o.defaultOptions={container:null,wrapper:null,itemSelector:null,cloneClassName:"-clone",speed:10,ease:"none",initialSeek:10,loop:!0,paused:!0,reversed:!1,autoPlay:!0,autoUpdate:!0,clonesOverflow:!0,clonesFinish:!1,clonesMin:0,plugins:null},o.plugins={};var a=/*#__PURE__*/function(){function t(i,s){this.options=e({},t.defaultOptions,s),this.reeller=i,this.gsap=this.reeller.gsap,this.tl=this.reeller.tl,this.pointerId=null,this.dragging=!1,this.samples=[],this.basePaused=null,this.dragDirection=0,this.nextReversed=null,this.init()}var i=t.prototype;return i.getTrackWidth=function(){var t=this.reeller.filler.calcData,e=t.itemsWidth,i=t.fullWidth,s=t.containerWidth;return this.reeller.options.clonesOverflow?void 0===e?0:e:(void 0===i?0:i)-(void 0===s?0:s)},i.applyDelta=function(t){var e=this.getTrackWidth();if(e&&t){var i=t*this.options.multiplier*this.reeller.options.speed/e;this.tl.totalTime(this.tl.totalTime()+i)}},i.getPointerPosition=function(t){var e="y"===this.options.axis?t.clientY:t.clientX;return this.options.invertAxis?-e:e},i.pushSample=function(t){var e=performance.now();for(this.samples.push({position:t,time:e});this.samples.length>5||e-this.samples[0].time>120;)this.samples.shift()},i.getVelocity=function(){if(this.samples.length<2)return 0;var t=this.samples[0],e=this.samples[this.samples.length-1],i=e.time-t.time;return i?(e.position-t.position)/i*1e3:0},i.saveDirection=function(t){if(this.options.changeDirection){var e=Math.sign(t)||this.dragDirection;e&&(this.nextReversed=e<0)}},i.beginDrag=function(){this.stopInertia(),this.dragging=!0,null===this.basePaused&&(this.basePaused=this.reeller.paused),this.tl.pause(),this.samples=[],this.pushSample(this.lastPos)},i.restorePlayback=function(){null!==this.nextReversed&&this.tl.reversed(this.nextReversed),this.basePaused?this.tl.pause():this.tl.resume(),this.basePaused=null,this.nextReversed=null},i.startInertia=function(t){var e=this,i=Math.abs(this.options.maxVelocity),s=Math.max(-i,Math.min(i,t)),n=s*this.options.speed*this.options.inertiaMultiplier;if(this.restorePlayback(),!(Math.abs(s)<this.options.threshold)&&n){var r={offset:0},o=0;this.inertiaTween=this.gsap.to(r,{offset:n,duration:this.options.speed,ease:this.options.ease,overwrite:!0,onUpdate:function(){var t=r.offset-o;o=r.offset,e.applyDelta(t)},onComplete:function(){e.inertiaTween=null}})}},i.stopInertia=function(){this.inertiaTween&&(this.inertiaTween.kill(),this.inertiaTween=null)},i.resetPointer=function(){this.pointerId=null,this.dragging=!1,this.startPos=0,this.lastPos=0,this.dragDirection=0,this.samples=[]},i.init=function(){var t=this,e=this.options.target;if(this.target=e?"string"==typeof e?this.reeller.filler.container.querySelector(e)||document.querySelector(e):e:this.reeller.filler.container,!this.target)throw new TypeError("DragPlugin target not found.");this.onPointerDown=function(e){if(null===t.pointerId&&("mouse"!==e.pointerType||0===e.button)){var i=t.getPointerPosition(e);t.stopInertia(),t.pointerId=e.pointerId,t.startPos=i,t.lastPos=i,t.samples=[],t.target.setPointerCapture&&t.target.setPointerCapture(e.pointerId)}},this.onPointerMove=function(e){if(e.pointerId===t.pointerId){var i=t.getPointerPosition(e);if(!t.dragging){if(Math.abs(i-t.startPos)<t.options.activationDistance)return;t.beginDrag()}t.options.preventDefault&&e.preventDefault();var s=i-t.lastPos;t.lastPos=i,s&&(t.dragDirection=Math.sign(s),t.pushSample(i),t.applyDelta(s))}},this.onPointerUp=function(e){if(e.pointerId===t.pointerId){if(!t.target.releasePointerCapture||t.target.hasPointerCapture&&!t.target.hasPointerCapture(e.pointerId)||t.target.releasePointerCapture(e.pointerId),!t.dragging)return null!==t.basePaused&&t.restorePlayback(),void t.resetPointer();t.options.preventDefault&&e.preventDefault(),t.pushSample(t.getPointerPosition(e));var i=t.getVelocity();t.saveDirection(i),t.resetPointer(),t.startInertia(i)}},this.onPointerCancel=function(e){e.pointerId===t.pointerId&&(!t.target.releasePointerCapture||t.target.hasPointerCapture&&!t.target.hasPointerCapture(e.pointerId)||t.target.releasePointerCapture(e.pointerId),(t.dragging||null!==t.basePaused)&&t.restorePlayback(),t.resetPointer())},this.target.addEventListener("pointerdown",this.onPointerDown),this.target.addEventListener("pointermove",this.onPointerMove),this.target.addEventListener("pointerup",this.onPointerUp),this.target.addEventListener("pointercancel",this.onPointerCancel)},i.destroy=function(){this.stopInertia(),this.target&&(this.target.removeEventListener("pointerdown",this.onPointerDown),this.target.removeEventListener("pointermove",this.onPointerMove),this.target.removeEventListener("pointerup",this.onPointerUp),this.target.removeEventListener("pointercancel",this.onPointerCancel)),this.basePaused=null,this.nextReversed=null,this.resetPointer()},t}();a.pluginName="drag",a.defaultOptions={speed:1,multiplier:1,threshold:50,inertiaMultiplier:.2,activationDistance:3,maxVelocity:3e3,ease:"expo.out",changeDirection:!1,axis:"x",invertAxis:!1,target:null,preventDefault:!0};var l=/*#__PURE__*/function(){function t(i,s){this.options=e({},t.defaultOptions,s),this.reeller=i,this.gsap=this.reeller.gsap,this.tl=this.reeller.tl,this.init()}var i=t.prototype;return i.getScrollPos=function(){return this.options.scrollProxy?this.options.scrollProxy():window.scrollY},i.init=function(){var t=this,e=this.getScrollPos(),i=1,s=!0,n=!1;this.tickerFn=function(){var r=t.getScrollPos(),o=r-e;if(o&&(n=!0),n){if(t.options.bothDirection||(o=Math.abs(o)),t.options.reversed&&(o*=-1),t.reeller.paused)return i=Math.sign(o),e=r,s||(t.gsap.killTweensOf(t.tl),s=!0),void t.tl.timeScale(i*t.options.threshold);if(o){var a=o*t.options.multiplier,l=a>0?Math.max(t.options.threshold,a):Math.min(-t.options.threshold,a);t.tween=t.gsap.to(t.tl,{timeScale:l,duration:t.options.speed,ease:t.options.ease,overwrite:t.options.overwrite}),s=!1}else if(!s){var h=t.options.stopOnEnd?0:i*t.options.threshold;t.gsap.killTweensOf(t.tl),t.tween=t.gsap.to(t.tl,{timeScale:h,duration:t.options.speed,overwrite:t.options.overwrite,ease:t.options.ease}),s=!0}i=Math.sign(o),e=r}},this.gsap.ticker.add(this.tickerFn)},i.destroy=function(){this.tickerFn&&(this.gsap.ticker.remove(this.tickerFn),this.tickerFn=null),this.tween&&this.tween.kill()},t}();l.pluginName="scroller",l.defaultOptions={speed:1,multiplier:.5,threshold:1,ease:"expo.out",overwrite:!0,bothDirection:!0,reversed:!1,stopOnEnd:!1,scrollProxy:null},t.DragPlugin=a,t.Filler=r,t.Reeller=o,t.ScrollerPlugin=l,t.default=o});
//# sourceMappingURL=reeller.min.js.map