reeller - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.d.ts

 import Reeller from "./module/Reeller";
 import Filler from "./module/Filler";
 import ScrollerPlugin from "./plugin/ScrollerPlugin";
-export { Reeller as default, Filler, ScrollerPlugin };
+export { Reeller as default, Reeller, Filler, ScrollerPlugin };
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -267,3 +267,3 @@ function _extends() {
     this.item = Array.from(this.container.querySelectorAll(this.options.itemSelector));
-    this.clonesData = {};
+    this.calcData = {};
     this.clonesCount = 0;
@@ -420,2 +420,5 @@ this.trigger('refresh');
     });
+    this.gsap.set(this.filler.container, {
+      overflow: 'hidden'
+    });
     this.tl.fromTo(this.filler.wrapper, {
@@ -580,5 +583,12 @@ x: function x() {
     this.filler.destroy(removeClones);
-    if (clearProps) this.gsap.set(this.filler.wrapper, {
-      clearProps: 'x,willChange'
-    });
+
+    if (clearProps) {
+      this.gsap.set(this.filler.container, {
+        clearProps: 'overflow'
+      });
+      this.gsap.set(this.filler.wrapper, {
+        clearProps: 'x,willChange'
+      });
+    }
+
     this.trigger('destroy');
@@ -759,3 +769,4 @@ };
 exports.Filler = Filler;
+exports.Reeller = Reeller;
 exports.ScrollerPlugin = ScrollerPlugin;
 exports["default"] = Reeller;

dist/index.module.js

@@ -267,3 +267,3 @@ function _extends() {
     this.item = Array.from(this.container.querySelectorAll(this.options.itemSelector));
-    this.clonesData = {};
+    this.calcData = {};
     this.clonesCount = 0;
@@ -420,2 +420,5 @@ this.trigger('refresh');
     });
+    this.gsap.set(this.filler.container, {
+      overflow: 'hidden'
+    });
     this.tl.fromTo(this.filler.wrapper, {
@@ -580,5 +583,12 @@ x: function x() {
     this.filler.destroy(removeClones);
-    if (clearProps) this.gsap.set(this.filler.wrapper, {
-      clearProps: 'x,willChange'
-    });
+
+    if (clearProps) {
+      this.gsap.set(this.filler.container, {
+        clearProps: 'overflow'
+      });
+      this.gsap.set(this.filler.wrapper, {
+        clearProps: 'x,willChange'
+      });
+    }
+
     this.trigger('destroy');
@@ -758,2 +768,2 @@ };
 
-export { Filler, ScrollerPlugin, Reeller as default };
+export { Filler, Reeller, ScrollerPlugin, Reeller as default };

dist/index.umd.js

@@ -272,3 +272,3 @@ (function (global, factory) {
       this.item = Array.from(this.container.querySelectorAll(this.options.itemSelector));
-      this.clonesData = {};
+      this.calcData = {};
       this.clonesCount = 0;
@@ -425,2 +425,5 @@ this.trigger('refresh');
       });
+      this.gsap.set(this.filler.container, {
+        overflow: 'hidden'
+      });
       this.tl.fromTo(this.filler.wrapper, {
@@ -585,5 +588,12 @@ x: function x() {
       this.filler.destroy(removeClones);
-      if (clearProps) this.gsap.set(this.filler.wrapper, {
-        clearProps: 'x,willChange'
-      });
+
+      if (clearProps) {
+        this.gsap.set(this.filler.container, {
+          clearProps: 'overflow'
+        });
+        this.gsap.set(this.filler.wrapper, {
+          clearProps: 'x,willChange'
+        });
+      }
+
       this.trigger('destroy');
@@ -764,2 +774,3 @@ };
   exports.Filler = Filler;
+  exports.Reeller = Reeller;
   exports.ScrollerPlugin = ScrollerPlugin;
@@ -766,0 +777,0 @@ exports["default"] = Reeller;

dist/module/Filler.d.ts

@@ -171,3 +171,2 @@ export default class Filler extends Base {
     item: Element[];
-    clonesData: {};
     /**
@@ -174,0 +173,0 @@ * Destroy Reeller instance.

dist/reeller.min.js

@@ -1,2 +0,2 @@
-!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?Object.assign.bind():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?Object.setPrototypeOf.bind():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}(),o=/*#__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.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 o=this.item[(e+n)%this.item.length].cloneNode(!0);o.classList.add(this.options.cloneClassName),s.push(o)}(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=e.getBoundingClientRect().width;t.itemWidth.push(i),t.itemsWidth+=i});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.clonesData={},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);o.defaultOptions={container:null,wrapper:null,itemSelector:null,cloneClassName:"-clone",autoUpdate:!0,clonesOverflow:!1,clonesFinish:!1,clonesMin:0};var r=/*#__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.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 o(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,repeat:-1,yoyo:!this.options.loop,onReverseComplete:function(){this.progress(1)}}),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],o=s.plugins[n];o?this.plugin[n]=new o(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(){this.paused=!1,this.tl.reverse(),this.trigger("reverse")},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.wrapper,{clearProps:"x,willChange"}),this.trigger("destroy")},s}(n);r.defaultOptions={container:null,wrapper:null,itemSelector:null,cloneClassName:"-clone",speed:10,ease:"none",initialSeek:10,loop:!0,paused:!0,reversed:!1,autoStop:!0,autoUpdate:!0,clonesOverflow:!0,clonesFinish:!1,clonesMin:0,plugins:null},r.plugins={};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.pageYOffset},i.init=function(){var t=this,e=this.getScrollPos(),i=1,s=!0;this.tickerFn=function(){if(t.reeller.paused)return t.gsap.killTweensOf(t.tl),void t.tl.timeScale(i*t.options.threshold);var n=t.getScrollPos(),o=n-e;if(t.options.bothDirection||(o=Math.abs(o)),t.options.reversed&&(o*=-1),o){var r=o*t.options.multiplier,l=r>0?Math.max(t.options.threshold,r):Math.min(-t.options.threshold,r);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 a=t.options.stopOnEnd?0:i*t.options.threshold;t.gsap.killTweensOf(t.tl),t.tween=t.gsap.to(t.tl,{timeScale:a,duration:t.options.speed,overwrite:t.options.overwrite,ease:t.options.ease}),s=!0}i=Math.sign(o),e=n},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.Filler=o,t.ScrollerPlugin=l,t.default=r});
+!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?Object.assign.bind():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?Object.setPrototypeOf.bind():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}(),o=/*#__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.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 o=this.item[(e+n)%this.item.length].cloneNode(!0);o.classList.add(this.options.cloneClassName),s.push(o)}(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=e.getBoundingClientRect().width;t.itemWidth.push(i),t.itemsWidth+=i});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);o.defaultOptions={container:null,wrapper:null,itemSelector:null,cloneClassName:"-clone",autoUpdate:!0,clonesOverflow:!1,clonesFinish:!1,clonesMin:0};var r=/*#__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.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 o(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,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],o=s.plugins[n];o?this.plugin[n]=new o(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(){this.paused=!1,this.tl.reverse(),this.trigger("reverse")},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);r.defaultOptions={container:null,wrapper:null,itemSelector:null,cloneClassName:"-clone",speed:10,ease:"none",initialSeek:10,loop:!0,paused:!0,reversed:!1,autoStop:!0,autoUpdate:!0,clonesOverflow:!0,clonesFinish:!1,clonesMin:0,plugins:null},r.plugins={};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.pageYOffset},i.init=function(){var t=this,e=this.getScrollPos(),i=1,s=!0;this.tickerFn=function(){if(t.reeller.paused)return t.gsap.killTweensOf(t.tl),void t.tl.timeScale(i*t.options.threshold);var n=t.getScrollPos(),o=n-e;if(t.options.bothDirection||(o=Math.abs(o)),t.options.reversed&&(o*=-1),o){var r=o*t.options.multiplier,l=r>0?Math.max(t.options.threshold,r):Math.min(-t.options.threshold,r);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 a=t.options.stopOnEnd?0:i*t.options.threshold;t.gsap.killTweensOf(t.tl),t.tween=t.gsap.to(t.tl,{timeScale:a,duration:t.options.speed,overwrite:t.options.overwrite,ease:t.options.ease}),s=!0}i=Math.sign(o),e=n},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.Filler=o,t.Reeller=r,t.ScrollerPlugin=l,t.default=r});
 //# sourceMappingURL=reeller.min.js.map

package.json

 {
     "name": "reeller",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "A powerful, flexible and modern library for creating the running text effect, also known as marquee or ticker.",
@@ -5,0 +5,0 @@ "keywords": [

src/index.js

@@ -5,2 +5,2 @@ import Filler from './module/Filler';
 
-export {Reeller as default, Filler, ScrollerPlugin};
+export {Reeller as default, Reeller, Filler, ScrollerPlugin};

src/module/Filler.js

@@ -168,3 +168,3 @@ import Base from './Base';
         this.item = Array.from(this.container.querySelectorAll(this.options.itemSelector));
-        this.clonesData = {};
+        this.calcData = {};
         this.clonesCount = 0;
@@ -171,0 +171,0 @@ this.trigger('refresh');

src/module/Reeller.js

@@ -124,2 +124,4 @@ import Base from './Base';
 
+        this.gsap.set(this.filler.container, {overflow: 'hidden'});
+
         this.tl.fromTo(
@@ -251,5 +253,8 @@ this.filler.wrapper,
         this.filler.destroy(removeClones);
-        if (clearProps) this.gsap.set(this.filler.wrapper, {clearProps: 'x,willChange'});
+        if (clearProps) {
+            this.gsap.set(this.filler.container, {clearProps: 'overflow'});
+            this.gsap.set(this.filler.wrapper, {clearProps: 'x,willChange'});
+        }
         this.trigger('destroy');
     }
 }

No alert changes

Improved metrics

Total package byte prevSize

152567

0.8%

Lines of code

3209

0.91%

No dependency changes