vevet 2.0.1-dev.9 → 2.0.2

package/build/cjs/components/scroll/scrollbar/ScrollBar.js

@@ -45,7 +45,7 @@ var ScrollBar = /** @class */ (function (_super) {
         var _a = _this.prop, autoHide = _a.autoHide, autoSize = _a.autoSize, minSize = _a.minSize, optimizeCalculations = _a.optimizeCalculations, isDraggable = _a.isDraggable, draggableScrollBehavior = _a.draggableScrollBehavior;
         // get container
         if (typeof _this.prop.container === 'string') {
-            var el = vevet_dom_1.selectOne(_this.prop.container);
+            var el = (0, vevet_dom_1.selectOne)(_this.prop.container);
             if (el) {
                 _this._container = el;
             }
@@ -60,12 +60,12 @@ var ScrollBar = /** @class */ (function (_super) {
         if (_this.container instanceof Element) {
             var parentElement = _this.container.parentElement;
             if (parentElement) {
-                _this._scrollWrapper = vevet_dom_1.createElement('div');
+                _this._scrollWrapper = (0, vevet_dom_1.createElement)('div');
                 _this._scrollWrapper.style.position = 'relative';
                 _this._scrollWrapper.style.display = 'inline-block';
                 parentElement.insertBefore(_this._scrollWrapper, _this.container);
                 _this._scrollWrapper.appendChild(_this.container);
-                _this._scrollWrapper.classList.add(_this.prefix + "-wrapper");
+                _this._scrollWrapper.classList.add("".concat(_this.prefix, "-wrapper"));
             }
         }
         // create bars
@@ -83,7 +83,7 @@ var ScrollBar = /** @class */ (function (_super) {
         _this._xBar = new Bar_1.default(__assign({ dir: 'x' }, barMainProp));
         _this._yBar = new Bar_1.default(__assign({ dir: 'y' }, barMainProp));
         // add styles
-        _this.scrollableElement.classList.add(_this.prefix + "-parent");
+        _this.scrollableElement.classList.add("".concat(_this.prefix, "-parent"));
         // initialize the class
         if (init) {
             _this.init();
@@ -91,11 +91,11 @@ var ScrollBar = /** @class */ (function (_super) {
         return _this;
     }
     ScrollBar.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, domParent: false, draggable: true, autoSize: true, autoHide: true, minSize: 50, optimizeCalculations: false, isDraggable: true, draggableScrollBehavior: 'smooth' });
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, domParent: false, draggable: true, autoSize: true, autoHide: true, minSize: 50, optimizeCalculations: false, resizeTimeout: 0, isDraggable: true, draggableScrollBehavior: 'smooth' });
     };
     Object.defineProperty(ScrollBar.prototype, "prefix", {
         get: function () {
-            return this._app.prefix + "scrollbar";
+            return "".concat(this._app.prefix, "scrollbar");
         },
         enumerable: false,
         configurable: true
@@ -167,6 +167,8 @@ var ScrollBar = /** @class */ (function (_super) {
         else {
             this.addViewportCallback('', function () {
                 _this.resize();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
         }
         this.resize();
@@ -199,7 +201,7 @@ var ScrollBar = /** @class */ (function (_super) {
             this._scrollWrapper.remove();
         }
         // reset styles
-        this.scrollableElement.classList.remove(this.prefix + "-parent");
+        this.scrollableElement.classList.remove("".concat(this.prefix, "-parent"));
     };
     return ScrollBar;
 }(Component_1.Component));

package/build/cjs/components/scroll/smooth-scroll/SmoothScroll.js

@@ -34,7 +34,7 @@ var vevet_dom_1 = require("vevet-dom");
 var normalize_wheel_1 = __importDefault(require("normalize-wheel"));
 var Component_1 = require("../../../base/Component");
 var AnimationFrame_1 = require("../../animation-frame/AnimationFrame");
-var boundVal_1 = __importDefault(require("../../../utils/math/boundVal"));
+var clamp_1 = __importDefault(require("../../../utils/math/clamp"));
 var math_1 = require("../../../utils/math");
 /**
  * Create smooth scrolling.
@@ -59,20 +59,20 @@ var SmoothScroll = /** @class */ (function (_super) {
         _this._outerAnimationFrameEvent = undefined;
         _this._currentFPS = 60;
         // get outer elements
-        _this._outer = vevet_dom_1.selectOne(selectors.outer);
+        _this._outer = (0, vevet_dom_1.selectOne)(selectors.outer);
         if (!(_this._outer instanceof HTMLElement)) {
-            throw new Error(selectors.outer + " is not a HTMLElement");
+            throw new Error("".concat(selectors.outer, " is not a HTMLElement"));
         }
         _this._outer.classList.add(_this.prefix);
         // get or create container
-        var existingContainer = vevet_dom_1.selectOne("." + _this.prefix + "__container", _this.outer);
-        if (vevet_dom_1.isElement(existingContainer)) {
+        var existingContainer = (0, vevet_dom_1.selectOne)(".".concat(_this.prefix, "__container"), _this.outer);
+        if ((0, vevet_dom_1.isElement)(existingContainer)) {
             _this._container = existingContainer;
             _this._containerExists = true;
         }
         else {
-            _this._container = vevet_dom_1.createElement('div', {
-                class: _this.prefix + "__container",
+            _this._container = (0, vevet_dom_1.createElement)('div', {
+                class: "".concat(_this.prefix, "__container"),
                 parent: _this.outer,
                 children: Array.from(_this.outer.children),
             });
@@ -80,16 +80,18 @@ var SmoothScroll = /** @class */ (function (_super) {
         }
         // get scrollable elements
         if (selectors.elements) {
-            _this._elements = Array.from(vevet_dom_1.selectAll(selectors.elements, _this._outer));
+            _this._elements = Array.from((0, vevet_dom_1.selectAll)(selectors.elements, _this._outer));
         }
         else {
             _this._elements = [_this._container];
         }
         _this._elementsLength = _this._elements.length;
         // add will-change
-        _this._elements.forEach(function (el) {
-            el.style.willChange = 'transform';
-        });
+        if (_this.prop.useWillChange) {
+            _this._elements.forEach(function (el) {
+                el.style.willChange = 'transform';
+            });
+        }
         // initialize the class
         if (init) {
             _this.init();
@@ -98,7 +100,7 @@ var SmoothScroll = /** @class */ (function (_super) {
     }
     Object.defineProperty(SmoothScroll.prototype, "prefix", {
         get: function () {
-            return this._app.prefix + "smooth-scroll";
+            return "".concat(this._app.prefix, "smooth-scroll");
         },
         enumerable: false,
         configurable: true
@@ -147,7 +149,7 @@ var SmoothScroll = /** @class */ (function (_super) {
                 ? -this.prop.overscroll.max : 0;
             var max = this.maxScrollableWidth
                 + (!!this.prop.overscroll && this.prop.isHorizontal ? this.prop.overscroll.max : 0);
-            this._targetLeft = boundVal_1.default(val, [min, max]);
+            this._targetLeft = (0, clamp_1.default)(val, [min, max]);
         },
         enumerable: false,
         configurable: true
@@ -175,7 +177,7 @@ var SmoothScroll = /** @class */ (function (_super) {
                 ? -this.prop.overscroll.max : 0;
             var max = this.maxScrollableHeight
                 + (!!this.prop.overscroll && !this.prop.isHorizontal ? this.prop.overscroll.max : 0);
-            this._targetTop = boundVal_1.default(val, [min, max]);
+            this._targetTop = (0, clamp_1.default)(val, [min, max]);
         },
         enumerable: false,
         configurable: true
@@ -254,9 +256,9 @@ var SmoothScroll = /** @class */ (function (_super) {
     });
     SmoothScroll.prototype._getDefaultProp = function () {
         return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { selectors: {
-                outer: "#" + this.prefix,
+                outer: "#".concat(this.prefix),
                 elements: false,
-            }, enabled: true, animationFrame: false, recalculateSizes: true, useWheel: true, autoStop: true, isHorizontal: false, stopPropagation: true, useWillChange: true, render: {
+            }, enabled: true, animationFrame: false, recalculateSizes: true, resizeTimeout: 0, useWheel: true, autoStop: true, isHorizontal: false, stopPropagation: true, useWillChange: true, render: {
                 lerp: 0.1,
                 lerpToFixed: 2,
                 approximation: 0.1,
@@ -278,6 +280,8 @@ var SmoothScroll = /** @class */ (function (_super) {
         this.resize();
         this.addViewportCallback('', function () {
             _this.resize(true);
+        }, {
+            timeout: this.prop.resizeTimeout,
         });
         // wheel
         this.addEventListeners(this.outer, 'wheel', function (e) {
@@ -308,8 +312,8 @@ var SmoothScroll = /** @class */ (function (_super) {
         // get sizes
         this._clientWidth = outer.clientWidth;
         this._clientHeight = outer.clientHeight;
-        this._scrollWidth = boundVal_1.default(container.clientWidth, [this.clientWidth, Infinity]);
-        this._scrollHeight = boundVal_1.default(container.clientHeight, [this.clientHeight, Infinity]);
+        this._scrollWidth = (0, clamp_1.default)(container.clientWidth, [this.clientWidth, Infinity]);
+        this._scrollHeight = (0, clamp_1.default)(container.clientHeight, [this.clientHeight, Infinity]);
         // force instant change
         // it means that after resizing, scrolling will be instantaneous for a while
         if (native) {
@@ -353,7 +357,7 @@ var SmoothScroll = /** @class */ (function (_super) {
             el.smoothScrollLeft = this.scrollLeft;
             el.smoothScrollTop = this.scrollTop;
             // update easing
-            var easingAttr = el.getAttribute(this.prefix + "-ease");
+            var easingAttr = el.getAttribute("".concat(this.prefix, "-ease"));
             if (easingAttr) {
                 try {
                     el.smoothScrollLerpEase = parseFloat(easingAttr);
@@ -384,7 +388,7 @@ var SmoothScroll = /** @class */ (function (_super) {
             evt.preventDefault();
         }
         // get normalized delta
-        var delta = normalize_wheel_1.default(evt);
+        var delta = (0, normalize_wheel_1.default)(evt);
         // set new scroll targets
         this.targetLeftBound += prop.isHorizontal ? delta.pixelY : delta.pixelX;
         this.targetTopBound += prop.isHorizontal ? delta.pixelX : delta.pixelY;
@@ -525,7 +529,7 @@ var SmoothScroll = /** @class */ (function (_super) {
         if (ease === void 0) { ease = this._getLerpEase(); }
         var _a = this.prop.render, lerpToFixed = _a.lerpToFixed, approximation = _a.approximation;
         var currentEase = this._instant ? 1 : ease;
-        var val = math_1.lerp(current, target, currentEase, approximation);
+        var val = (0, math_1.lerp)(current, target, currentEase, approximation);
         // round the values
         if (typeof lerpToFixed === 'number') {
             var fixed = Math.round(Math.abs(lerpToFixed));
@@ -555,7 +559,7 @@ var SmoothScroll = /** @class */ (function (_super) {
             var x = -el.smoothScrollLeft;
             var y = -el.smoothScrollTop;
             // set styles
-            el.style.transform = "matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, " + x + ", " + y + ", 0,1)";
+            el.style.transform = "matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ".concat(x, ", ").concat(y, ", 0,1)");
         }
     };
     // LIKE NATIVE SCROLL

package/build/cjs/components/text/SplitText.js

@@ -39,7 +39,7 @@ var SplitText = /** @class */ (function (_super) {
         var _this = _super.call(this, initialProp, false) || this;
         // get text container
         if (_this.prop.container) {
-            var container = vevet_dom_1.selectOne(_this.prop.container);
+            var container = (0, vevet_dom_1.selectOne)(_this.prop.container);
             if (container instanceof HTMLElement) {
                 _this._container = container;
             }
@@ -50,8 +50,12 @@ var SplitText = /** @class */ (function (_super) {
         }
         // get initial text
         _this._initHTML = _this._container.innerHTML;
-        _this._initText = (_this._container.innerText || 'no rendered text').trim();
+        var innerText = _this._container.innerText.trim() || _this._container.innerHTML.trim();
+        _this._initText = innerText || 'no rendered text';
         _this._initText = _this._initText.replace(/\s+\n/gm, '\n');
+        _this._initText = _this._initText.replace(/<br>/gm, String.fromCharCode(10));
+        _this._initText = _this._initText.replace(/<br\/>/gm, String.fromCharCode(10));
+        _this._initText = _this._initText.replace(/<br \/>/gm, String.fromCharCode(10));
         // set default vars
         _this._isPrimarySplit = false;
         _this._letters = [];
@@ -64,11 +68,11 @@ var SplitText = /** @class */ (function (_super) {
         return _this;
     }
     SplitText.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: "#" + this.prefix, appendLetters: true, appendLines: false });
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: "#".concat(this.prefix), appendLetters: true, appendLines: false, viewportTarget: '', resizeTimeout: 0 });
     };
     Object.defineProperty(SplitText.prototype, "prefix", {
         get: function () {
-            return this._app.prefix + "split-text";
+            return "".concat(this._app.prefix, "split-text");
         },
         enumerable: false,
         configurable: true
@@ -110,8 +114,10 @@ var SplitText = /** @class */ (function (_super) {
         // split the text
         this.splitText();
         if (this.prop.appendLines) {
-            this.addViewportCallback('', function () {
+            this.addViewportCallback(this.prop.viewportTarget, function () {
                 _this.splitText();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
         }
     };
@@ -147,8 +153,8 @@ var SplitText = /** @class */ (function (_super) {
             var currentWord = _this._words[wordIndex] || {
                 content: '',
                 hasNewLine: false,
-                el: vevet_dom_1.createElement('span', {
-                    class: _this.prefix + "__word",
+                el: (0, vevet_dom_1.createElement)('span', {
+                    class: "".concat(_this.prefix, "__word"),
                 }),
                 letters: [],
             };
@@ -157,13 +163,14 @@ var SplitText = /** @class */ (function (_super) {
             // get type of the char
             var charCode = char.charCodeAt(0);
             var isWhitespace = charCode === 32 || charCode === 160;
+            var isSeparator = [45, 8208, 8211, 8212, 8722].includes(charCode);
             var isNewLine = charCode === 10;
             // add elements
             if (isWhitespace) {
                 currentWord.whitespace = document.createTextNode(' ');
             }
             if (isNewLine) {
-                currentWord.br = vevet_dom_1.createElement('br');
+                currentWord.br = (0, vevet_dom_1.createElement)('br');
             }
             // update word states
             currentWord.hasNewLine = isNewLine;
@@ -177,6 +184,21 @@ var SplitText = /** @class */ (function (_super) {
             if (!_this.prop.appendLetters) {
                 currentWord.el.innerHTML = currentWord.content;
             }
+            // go to next word if needed
+            if (isSeparator) {
+                wordIndex += 1;
+            }
+        });
+        // only filled words
+        this._words = this._words.filter(function (word, index) {
+            if (word.content.length === 0) {
+                if (index > 0) {
+                    _this._words[index - 1].whitespace = word.whitespace;
+                    _this._words[index - 1].br = word.br;
+                }
+                return false;
+            }
+            return true;
         });
     };
     /**
@@ -223,8 +245,8 @@ var SplitText = /** @class */ (function (_super) {
             var wordLetters = [];
             chars.forEach(function (char) {
                 var letter = {
-                    el: vevet_dom_1.createElement('span', {
-                        class: _this.prefix + "__letter",
+                    el: (0, vevet_dom_1.createElement)('span', {
+                        class: "".concat(_this.prefix, "__letter"),
                         html: char,
                     }),
                     content: char,
@@ -270,8 +292,8 @@ var SplitText = /** @class */ (function (_super) {
             // create new line
             if (isNewLine) {
                 currentLine = {
-                    el: vevet_dom_1.createElement('span', {
-                        class: _this.prefix + "__line",
+                    el: (0, vevet_dom_1.createElement)('span', {
+                        class: "".concat(_this.prefix, "__line"),
                     }),
                     content: '',
                     words: [],

package/build/cjs/components/timeline/StaticTimeline.js

@@ -32,8 +32,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StaticTimeline = void 0;
 var easing_progress_1 = __importDefault(require("easing-progress"));
 var Component_1 = require("../../base/Component");
-var scopeProgress_1 = __importDefault(require("../../utils/math/scopeProgress"));
-var boundVal_1 = __importDefault(require("../../utils/math/boundVal"));
+var scoped_1 = __importDefault(require("../../utils/math/scoped"));
+var clamp_1 = __importDefault(require("../../utils/math/clamp"));
 /**
  * StaticTimeline is the base class for Timeline itself.
  * The difference between the coponents is that StaticTimeline has no animation:
@@ -95,7 +95,7 @@ var StaticTimeline = /** @class */ (function (_super) {
      */
     StaticTimeline.prototype._handleProgress = function () {
         // calculate easing progress
-        this._easing = easing_progress_1.default(this._progress, this.prop.easing);
+        this._easing = (0, easing_progress_1.default)(this._progress, this.prop.easing);
         // launch progress events
         this._callbacks.tbt('progress', {
             progress: this._progress,
@@ -118,7 +118,7 @@ var StaticTimeline = /** @class */ (function (_super) {
         for (var index = 0, l = length; index < l; index += 1) {
             var tm = this._nestedTimelines[index];
             // calculate progress of this very timeline
-            var tmProgress = boundVal_1.default(scopeProgress_1.default(progressForNested, tm.prop.nestedScope), [0, 1]);
+            var tmProgress = (0, clamp_1.default)((0, scoped_1.default)(progressForNested, tm.prop.nestedScope), [0, 1]);
             tm.progress = tmProgress;
         }
     };

package/build/cjs/components/timeline/Timeline.js

@@ -31,7 +31,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Timeline = void 0;
 var StaticTimeline_1 = require("./StaticTimeline");
-var boundVal_1 = __importDefault(require("../../utils/math/boundVal"));
+var clamp_1 = __importDefault(require("../../utils/math/clamp"));
 /**
  * Timeline is an animation helper.
  */
@@ -149,7 +149,7 @@ var Timeline = /** @class */ (function (_super) {
         this._animationFrameLastTime = currentTime;
         // calculate current progress
         var progressIterator = frameDiff / this.prop.duration / (isReversed ? -1 : 1);
-        var progressTarget = boundVal_1.default(this.progress + progressIterator, [0, 1]);
+        var progressTarget = (0, clamp_1.default)(this.progress + progressIterator, [0, 1]);
         this.progress = progressTarget;
         // end animation
         if ((progressTarget === 1 && !isReversed)

package/build/cjs/handlers/wheel/WheelHandler.js

@@ -69,8 +69,8 @@ var WheelHandler = /** @class */ (function (_super) {
     WheelHandler.prototype._setEvents = function () {
         _super.prototype._setEvents.call(this);
         if (!(this.container instanceof Window)) {
-            this._listeners.push(vevet_dom_1.addEventListener(this.container, 'mouseenter', this._handleMouseEnter.bind(this)));
-            this._listeners.push(vevet_dom_1.addEventListener(this.container, 'mouseleave', this._handleMouseLeave.bind(this)));
+            this._listeners.push((0, vevet_dom_1.addEventListener)(this.container, 'mouseenter', this._handleMouseEnter.bind(this)));
+            this._listeners.push((0, vevet_dom_1.addEventListener)(this.container, 'mouseleave', this._handleMouseLeave.bind(this)));
         }
         else {
             this._toggleWheelEvent();
@@ -118,7 +118,7 @@ var WheelHandler = /** @class */ (function (_super) {
             clearTimeout(this._lockWheelTimeout);
         }
         // create a listener
-        this._wheelListener = vevet_dom_1.addEventListener(this.container, 'wheel', 
+        this._wheelListener = (0, vevet_dom_1.addEventListener)(this.container, 'wheel', 
         // throttle(this._handleWheel.bind(this), 200),
         this._handleWheel.bind(this));
     };
@@ -156,7 +156,7 @@ var WheelHandler = /** @class */ (function (_super) {
             return;
         }
         // data
-        var delta = normalize_wheel_1.default(evt);
+        var delta = (0, normalize_wheel_1.default)(evt);
         var threshold = this.prop.threshold;
         // launch events
         var eventFired = false;

package/build/cjs/utils/common/mergeWithoutArrays.js

@@ -9,7 +9,7 @@ var lodash_mergewith_1 = __importDefault(require("lodash.mergewith"));
  * The function doesn't change the "object" and "source".
  */
 function mergeWithoutArrays(object, source) {
-    return lodash_mergewith_1.default(object, source, function (objValue, srcValue) {
+    return (0, lodash_mergewith_1.default)(object, source, function (objValue, srcValue) {
         if (Array.isArray(objValue)) {
             return srcValue;
         }

package/build/cjs/utils/common/randID.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 function randID(prefix) {
     if (prefix === void 0) { prefix = 'id'; }
-    var id = +new Date() + "_" + Math.round(Math.random() * 1000);
-    return prefix + "_" + id;
+    var id = "".concat(+new Date(), "_").concat(Math.round(Math.random() * 1000));
+    return "".concat(prefix, "_").concat(id);
 }
 exports.default = randID;

package/build/cjs/utils/listeners/onScroll.js

@@ -2,47 +2,85 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var vevet_dom_1 = require("vevet-dom");
 var SmoothScroll_1 = require("../../components/scroll/smooth-scroll/SmoothScroll");
+var common_1 = require("../common");
+var instances = [];
 /**
  * Add OnScroll event
  */
-function onScroll(selector, callback, props) {
-    var listeners = [];
-    if (selector instanceof SmoothScroll_1.SmoothScroll) {
-        selector.addCallback('scroll', function () {
-            callback({
-                scrollTop: selector.scrollTop,
-                scrollLeft: selector.scrollLeft,
-            });
+function onScroll(_a) {
+    var container = _a.container, callback = _a.callback, _b = _a.isPassive, isPassive = _b === void 0 ? false : _b;
+    // check if listeners for this element already exist
+    var instance = instances.find(function (data) { return (data.container === container && data.isPassive === isPassive); });
+    var callbackId = (0, common_1.randID)('scroll-event');
+    // if a listener exists, we just add a new callback to its stack
+    if (instance) {
+        instance.callbacks.push({
+            id: callbackId,
+            callback: callback,
         });
     }
     else {
-        var outer_1;
-        if (typeof selector === 'string') {
-            outer_1 = vevet_dom_1.selectOne(selector);
+        // otherwise we create a new instance
+        instance = {
+            id: (0, common_1.randID)('scroll-event-instance'),
+            container: container,
+            callbacks: [{
+                    id: callbackId,
+                    callback: callback,
+                }],
+            isPassive: isPassive,
+            listeners: [],
+        };
+        instances.push(instance);
+        // vars
+        var listeners = instance.listeners;
+        // smooth scroll events
+        if (container instanceof SmoothScroll_1.SmoothScroll) {
+            listeners.push(container.addCallback('scroll', function () {
+                var scrollTop = container.scrollTop, scrollLeft = container.scrollLeft;
+                for (var index = 0; index < instance.callbacks.length; index += 1) {
+                    instance.callbacks[index].callback({
+                        scrollTop: scrollTop,
+                        scrollLeft: scrollLeft,
+                    });
+                }
+            }));
         }
         else {
-            outer_1 = selector;
-        }
-        if (outer_1) {
-            listeners.push(vevet_dom_1.addEventListener(outer_1, 'scroll', function () {
-                var scrollTop = outer_1 instanceof Window
-                    ? outer_1.pageYOffset : outer_1.scrollTop;
-                var scrollLeft = outer_1 instanceof Window
-                    ? outer_1.pageXOffset : outer_1.scrollLeft;
-                callback({
-                    scrollTop: scrollTop,
-                    scrollLeft: scrollLeft,
-                });
-            }, props ? {
-                passive: props.passive,
-            } : undefined));
+            // dom scroll events
+            var isWindow_1 = container instanceof Window;
+            var domContainer_1 = (0, vevet_dom_1.selectOne)(container);
+            listeners.push((0, vevet_dom_1.addEventListener)(domContainer_1, 'scroll', function () {
+                var scrollTop = isWindow_1
+                    ? domContainer_1.pageYOffset : domContainer_1.scrollTop;
+                var scrollLeft = isWindow_1
+                    ? domContainer_1.pageXOffset : domContainer_1.scrollLeft;
+                for (var index = 0; index < instance.callbacks.length; index += 1) {
+                    instance.callbacks[index].callback({
+                        scrollTop: scrollTop,
+                        scrollLeft: scrollLeft,
+                    });
+                }
+            }, {
+                passive: isPassive,
+            }));
         }
     }
     return {
         remove: function () {
-            listeners.forEach(function (listener) {
-                listener.remove();
+            var newCallbacks = instance.callbacks.filter(function (item) {
+                if (item.id !== callbackId) {
+                    return true;
+                }
+                return false;
             });
+            instance.callbacks = newCallbacks;
+            if (newCallbacks.length === 0) {
+                instance.listeners.forEach(function (listener) {
+                    listener.remove();
+                });
+                instances = instances.filter(function (item) { return item.id !== instance.id; });
+            }
         },
     };
 }

package/build/cjs/utils/math/{boundVal.js → clamp.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 /**
- * Bound a value between two points
+ * Clamp the value between two points
  */
-function boundVal(val, scope) {
+function clamp(val, scope) {
     if (scope === void 0) { scope = [0, 1]; }
     if (val < scope[0]) {
         return scope[0];
@@ -13,4 +13,4 @@ function boundVal(val, scope) {
     }
     return val;
 }
-exports.default = boundVal;
+exports.default = clamp;

package/build/cjs/utils/math/clampScope.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var scoped_1 = __importDefault(require("./scoped"));
+var clamp_1 = __importDefault(require("./clamp"));
+/**
+ * Get progress relatively to the scope and clamp it within two points
+ */
+function clampScoped(val, scope, clampScope) {
+    if (scope === void 0) { scope = [0, 1]; }
+    if (clampScope === void 0) { clampScope = [0, 1]; }
+    return (0, clamp_1.default)((0, scoped_1.default)(val, scope), clampScope);
+}
+exports.default = clampScoped;

package/build/cjs/utils/math/inScope.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Check if the value is within the scope
+ */
+function inScope(val, scopeValue) {
+    if (scopeValue === void 0) { scopeValue = [0, 1]; }
+    return val >= scopeValue[0] && val <= scopeValue[1];
+}
+exports.default = inScope;

package/build/cjs/utils/math/index.js

@@ -3,12 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.spreadScopeProgress = exports.scopeProgress = exports.lerp = exports.boundVal = void 0;
-var boundVal_1 = __importDefault(require("./boundVal"));
-exports.boundVal = boundVal_1.default;
+exports.wrap = exports.clampScope = exports.inScope = exports.spreadScope = exports.scoped = exports.lerp = exports.clamp = void 0;
+var clamp_1 = __importDefault(require("./clamp"));
+exports.clamp = clamp_1.default;
 var lerp_1 = __importDefault(require("./lerp"));
 exports.lerp = lerp_1.default;
-var scopeProgress_1 = __importDefault(require("./scopeProgress"));
-exports.scopeProgress = scopeProgress_1.default;
-var spreadScopeProgress_1 = __importDefault(require("./spreadScopeProgress"));
-exports.spreadScopeProgress = spreadScopeProgress_1.default;
+var scoped_1 = __importDefault(require("./scoped"));
+exports.scoped = scoped_1.default;
+var spreadScope_1 = __importDefault(require("./spreadScope"));
+exports.spreadScope = spreadScope_1.default;
+var inScope_1 = __importDefault(require("./inScope"));
+exports.inScope = inScope_1.default;
+var clampScope_1 = __importDefault(require("./clampScope"));
+exports.clampScope = clampScope_1.default;
+var wrap_1 = __importDefault(require("./wrap"));
+exports.wrap = wrap_1.default;

package/build/cjs/utils/math/scoped.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Get progress relatively to the scope.
+ *
+ * @example
+ *
+ * scope(.35, [0, 1]);
+ * // => .5
+ * scope(.35, [.25, 1]);
+ * // => .133
+ */
+function scoped(val, scopeValue) {
+    if (scopeValue === void 0) { scopeValue = [0, 1]; }
+    var result = (val - scopeValue[0]) / (scopeValue[1] - scopeValue[0]);
+    return result;
+}
+exports.default = scoped;