vevet 2.0.1-dev.26 → 2.0.1-dev.30

package/build/cjs/base/Module.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -204,10 +215,8 @@ var Module = /** @class */ (function () {
      * {@see Viewport}
      */
     Module.prototype.addViewportCallback = function (target, func, data) {
-        if (data === void 0) { data = {
-            name: this.constructor.name,
-        }; }
-        var callback = this._app.viewport.add(target, func, data);
+        if (data === void 0) { data = {}; }
+        var callback = this._app.viewport.add(target, func, __assign(__assign({}, data), { name: this.constructor.name }));
         this._viewportCallbacks.push(callback);
         return callback;
     };

package/build/cjs/components/animation-frame/AnimationFrame.js

@@ -162,7 +162,7 @@ var AnimationFrame = /** @class */ (function (_super) {
         this._frameIndex = newFrameIndex;
         // calculate real fps
         var timeDiff = currentTime - this._prevFrameTime;
-        var realFPS = math_1.boundVal(timeDiff === 0 ? 1000 / 60 : Math.floor(1000 / timeDiff), [1, Infinity]);
+        var realFPS = math_1.clamp(timeDiff === 0 ? 1000 / 60 : Math.floor(1000 / timeDiff), [1, Infinity]);
         // launch callbacks
         this.callbacks.tbt('frame', {
             fps: this.prop.fps,

package/build/cjs/components/canvas/Ctx2D.js

@@ -51,7 +51,9 @@ var Ctx2D = /** @class */ (function (_super) {
         });
         _this._ctx = _this._canvas.getContext('2d');
         // and resize it for the first time
-        _this.resize();
+        if (_this.prop.initialResize) {
+            _this.resize();
+        }
         // initialize the class
         if (init) {
             _this.init();
@@ -124,7 +126,7 @@ var Ctx2D = /** @class */ (function (_super) {
         configurable: true
     });
     Ctx2D.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: false, append: true, updateOnResize: false, width: false, height: false, dpr: false });
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: false, append: true, updateOnResize: false, initialResize: true, resizeTimeout: 0, width: false, height: false, dpr: false });
     };
     // Set Module Events
     Ctx2D.prototype._setEvents = function () {
@@ -134,6 +136,8 @@ var Ctx2D = /** @class */ (function (_super) {
             var viewportTarget = typeof this.prop.updateOnResize === 'boolean' ? '' : this.prop.updateOnResize;
             this.addViewportCallback(viewportTarget, function () {
                 _this.resize();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
             this.resize();
         }

package/build/cjs/components/scroll/scrollable/ScrollView.js

@@ -38,7 +38,7 @@ exports.ScrollView = void 0;
 var ScrollEventsBase_1 = require("./ScrollEventsBase");
 var onScroll_1 = __importDefault(require("../../../utils/listeners/onScroll"));
 var listeners_1 = require("../../../utils/listeners");
-var boundVal_1 = __importDefault(require("../../../utils/math/boundVal"));
+var clamp_1 = __importDefault(require("../../../utils/math/clamp"));
 var timeoutCallback_1 = __importDefault(require("../../../utils/common/timeoutCallback"));
 /**
  * Elements into viewport
@@ -67,7 +67,7 @@ var ScrollView = /** @class */ (function (_super) {
         configurable: true
     });
     ScrollView.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { enabled: true, container: window, elements: [], threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true });
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { enabled: true, container: window, elements: [], threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true, resizeTimeout: 0 });
     };
     Object.defineProperty(ScrollView.prototype, "elements", {
         /**
@@ -89,6 +89,8 @@ var ScrollView = /** @class */ (function (_super) {
         this.resize();
         this.addViewportCallback('', function () {
             _this.resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
         });
     };
     ScrollView.prototype._onPropMutate = function () {
@@ -259,7 +261,7 @@ var ScrollView = /** @class */ (function (_super) {
         // are done for the first time
         var delay = 0;
         if (!!useDelay && this._firstStart) {
-            var progress = boundVal_1.default(useDelay.dir === 'x'
+            var progress = clamp_1.default(useDelay.dir === 'x'
                 ? (bounding.left - parentBounding.left) / parentBounding.width
                 : (bounding.top - parentBounding.top) / parentBounding.height, [0, 1]);
             delay = progress * useDelay.max;

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var vevet_dom_1 = require("vevet-dom");
 var onScroll_1 = __importDefault(require("../../../utils/listeners/onScroll"));
-var boundVal_1 = __importDefault(require("../../../utils/math/boundVal"));
+var clamp_1 = __importDefault(require("../../../utils/math/clamp"));
 var DraggerMove_1 = require("../../dragger/DraggerMove");
 var SmoothScroll_1 = require("../smooth-scroll/SmoothScroll");
 var Bar = /** @class */ (function () {
@@ -266,7 +266,7 @@ var Bar = /** @class */ (function () {
      */
     Bar.prototype._renderThumb = function () {
         // calculate progress
-        var progress = boundVal_1.default(this._scrollVal / this.scrollLine, [0, 1]);
+        var progress = clamp_1.default(this._scrollVal / this.scrollLine, [0, 1]);
         // calculate transforms
         var x = this.isX ? (this._outerWidth - this._thumbWidth) * progress : 0;
         var y = this.isY ? (this._outerHeight - this._thumbHeight) * progress : 0;
@@ -285,11 +285,11 @@ var Bar = /** @class */ (function () {
         // calculate thumb sizes
         if (this.prop.autoSize) {
             if (this.isX) {
-                var barSize = boundVal_1.default(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
+                var barSize = clamp_1.default(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
                 thumb.style.width = barSize + "px";
             }
             else {
-                var barSize = boundVal_1.default(this._outerHeight / (this.scrollHeight / (this.scrollHeight - scrollLine)), [minSize, Infinity]);
+                var barSize = clamp_1.default(this._outerHeight / (this.scrollHeight / (this.scrollHeight - scrollLine)), [minSize, Infinity]);
                 thumb.style.height = barSize + "px";
             }
         }

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

@@ -91,7 +91,7 @@ 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 () {
@@ -167,6 +167,8 @@ var ScrollBar = /** @class */ (function (_super) {
         else {
             this.addViewportCallback('', function () {
                 _this.resize();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
         }
         this.resize();

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.
@@ -149,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 = clamp_1.default(val, [min, max]);
         },
         enumerable: false,
         configurable: true
@@ -177,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 = clamp_1.default(val, [min, max]);
         },
         enumerable: false,
         configurable: true
@@ -258,7 +258,7 @@ var SmoothScroll = /** @class */ (function (_super) {
         return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { selectors: {
                 outer: "#" + 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,
@@ -280,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) {
@@ -310,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 = clamp_1.default(container.clientWidth, [this.clientWidth, Infinity]);
+        this._scrollHeight = 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) {

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

@@ -68,7 +68,7 @@ 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, viewportTarget: '' });
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: "#" + this.prefix, appendLetters: true, appendLines: false, viewportTarget: '', resizeTimeout: 0 });
     };
     Object.defineProperty(SplitText.prototype, "prefix", {
         get: function () {
@@ -116,6 +116,8 @@ var SplitText = /** @class */ (function (_super) {
         if (this.prop.appendLines) {
             this.addViewportCallback(this.prop.viewportTarget, function () {
                 _this.splitText();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
         }
     };

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:
@@ -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 = clamp_1.default(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 = clamp_1.default(this.progress + progressIterator, [0, 1]);
         this.progress = progressTarget;
         // end animation
         if ((progressTarget === 1 && !isReversed)

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Clamp the value between two points
+ */
+function clamp(val, scope) {
+    if (scope === void 0) { scope = [0, 1]; }
+    if (val < scope[0]) {
+        return scope[0];
+    }
+    if (val > scope[1]) {
+        return scope[1];
+    }
+    return val;
+}
+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 clamp_1.default(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,14 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrap = 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;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Distribute scope progress among a certain quantity of timelines.
+ */
+function spreadScope(quantity, shift) {
+    var timelines = [];
+    // duration for each element
+    var duration = 1 / (quantity - shift * (quantity - 1));
+    // calculate timelines
+    for (var index = 0; index < quantity; index += 1) {
+        var start = (duration * (1 - shift)) * index;
+        var end = start + duration;
+        timelines.push([start, end]);
+    }
+    return timelines;
+}
+exports.default = spreadScope;

package/build/es/base/Module.js

@@ -170,10 +170,8 @@ export class Module {
      * Add a viewport callback that will be removed on class destroy
      * {@see Viewport}
      */
-    addViewportCallback(target, func, data = {
-        name: this.constructor.name,
-    }) {
-        const callback = this._app.viewport.add(target, func, data);
+    addViewportCallback(target, func, data = {}) {
+        const callback = this._app.viewport.add(target, func, Object.assign(Object.assign({}, data), { name: this.constructor.name }));
         this._viewportCallbacks.push(callback);
         return callback;
     }

package/build/es/components/animation-frame/AnimationFrame.js

@@ -1,5 +1,5 @@
 import { Component } from '../../base/Component';
-import { boundVal } from '../../utils/math';
+import { clamp } from '../../utils/math';
 /**
  * Launch an animation frame with a certain FPS
  */
@@ -126,7 +126,7 @@ export class AnimationFrame extends Component {
         this._frameIndex = newFrameIndex;
         // calculate real fps
         const timeDiff = currentTime - this._prevFrameTime;
-        const realFPS = boundVal(timeDiff === 0 ? 1000 / 60 : Math.floor(1000 / timeDiff), [1, Infinity]);
+        const realFPS = clamp(timeDiff === 0 ? 1000 / 60 : Math.floor(1000 / timeDiff), [1, Infinity]);
         // launch callbacks
         this.callbacks.tbt('frame', {
             fps: this.prop.fps,

package/build/es/components/canvas/Ctx2D.js

@@ -20,7 +20,9 @@ export class Ctx2D extends Component {
         });
         this._ctx = this._canvas.getContext('2d');
         // and resize it for the first time
-        this.resize();
+        if (this.prop.initialResize) {
+            this.resize();
+        }
         // initialize the class
         if (init) {
             this.init();
@@ -60,7 +62,7 @@ export class Ctx2D extends Component {
         return this._dpr;
     }
     _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: false, append: true, updateOnResize: false, width: false, height: false, dpr: false });
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: false, append: true, updateOnResize: false, initialResize: true, resizeTimeout: 0, width: false, height: false, dpr: false });
     }
     // Set Module Events
     _setEvents() {
@@ -69,6 +71,8 @@ export class Ctx2D extends Component {
             const viewportTarget = typeof this.prop.updateOnResize === 'boolean' ? '' : this.prop.updateOnResize;
             this.addViewportCallback(viewportTarget, () => {
                 this.resize();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
             this.resize();
         }

package/build/es/components/scroll/scrollable/ScrollView.js

@@ -1,7 +1,7 @@
 import { ScrollEventsBase } from './ScrollEventsBase';
 import onScroll from '../../../utils/listeners/onScroll';
 import { intersectionObserverSupported } from '../../../utils/listeners';
-import boundVal from '../../../utils/math/boundVal';
+import clamp from '../../../utils/math/clamp';
 import timeoutCallback from '../../../utils/common/timeoutCallback';
 /**
  * Elements into viewport
@@ -23,7 +23,7 @@ export class ScrollView extends ScrollEventsBase {
         return `${this._app.prefix}scroll-view`;
     }
     _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { enabled: true, container: window, elements: [], threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true });
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { enabled: true, container: window, elements: [], threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true, resizeTimeout: 0 });
     }
     /**
      * Elements to seek
@@ -40,6 +40,8 @@ export class ScrollView extends ScrollEventsBase {
         this.resize();
         this.addViewportCallback('', () => {
             this.resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
         });
     }
     _onPropMutate() {
@@ -209,7 +211,7 @@ export class ScrollView extends ScrollEventsBase {
         // are done for the first time
         let delay = 0;
         if (!!useDelay && this._firstStart) {
-            const progress = boundVal(useDelay.dir === 'x'
+            const progress = clamp(useDelay.dir === 'x'
                 ? (bounding.left - parentBounding.left) / parentBounding.width
                 : (bounding.top - parentBounding.top) / parentBounding.height, [0, 1]);
             delay = progress * useDelay.max;

package/build/es/components/scroll/scrollbar/Bar.js

@@ -1,6 +1,6 @@
 import { addEventListener, createElement } from 'vevet-dom';
 import onScroll from '../../../utils/listeners/onScroll';
-import boundVal from '../../../utils/math/boundVal';
+import clamp from '../../../utils/math/clamp';
 import { DraggerMove } from '../../dragger/DraggerMove';
 import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
 export default class Bar {
@@ -215,7 +215,7 @@ export default class Bar {
      */
     _renderThumb() {
         // calculate progress
-        const progress = boundVal(this._scrollVal / this.scrollLine, [0, 1]);
+        const progress = clamp(this._scrollVal / this.scrollLine, [0, 1]);
         // calculate transforms
         const x = this.isX ? (this._outerWidth - this._thumbWidth) * progress : 0;
         const y = this.isY ? (this._outerHeight - this._thumbHeight) * progress : 0;
@@ -234,11 +234,11 @@ export default class Bar {
         // calculate thumb sizes
         if (this.prop.autoSize) {
             if (this.isX) {
-                const barSize = boundVal(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
+                const barSize = clamp(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
                 thumb.style.width = `${barSize}px`;
             }
             else {
-                const barSize = boundVal(this._outerHeight / (this.scrollHeight / (this.scrollHeight - scrollLine)), [minSize, Infinity]);
+                const barSize = clamp(this._outerHeight / (this.scrollHeight / (this.scrollHeight - scrollLine)), [minSize, Infinity]);
                 thumb.style.height = `${barSize}px`;
             }
         }

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

@@ -56,7 +56,7 @@ export class ScrollBar extends Component {
         }
     }
     _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, domParent: false, draggable: true, autoSize: true, autoHide: true, minSize: 50, optimizeCalculations: false, isDraggable: true, draggableScrollBehavior: 'smooth' });
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, domParent: false, draggable: true, autoSize: true, autoHide: true, minSize: 50, optimizeCalculations: false, resizeTimeout: 0, isDraggable: true, draggableScrollBehavior: 'smooth' });
     }
     get prefix() {
         return `${this._app.prefix}scrollbar`;
@@ -115,6 +115,8 @@ export class ScrollBar extends Component {
         else {
             this.addViewportCallback('', () => {
                 this.resize();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
         }
         this.resize();

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

@@ -2,7 +2,7 @@ import { selectAll, selectOne, isElement, createElement, } from 'vevet-dom';
 import normalizeWheel from 'normalize-wheel';
 import { Component } from '../../../base/Component';
 import { AnimationFrame } from '../../animation-frame/AnimationFrame';
-import boundVal from '../../../utils/math/boundVal';
+import clamp from '../../../utils/math/clamp';
 import { lerp } from '../../../utils/math';
 /**
  * Create smooth scrolling.
@@ -90,7 +90,7 @@ export class SmoothScroll extends Component {
             ? -this.prop.overscroll.max : 0;
         const max = this.maxScrollableWidth
             + (!!this.prop.overscroll && this.prop.isHorizontal ? this.prop.overscroll.max : 0);
-        this._targetLeft = boundVal(val, [min, max]);
+        this._targetLeft = clamp(val, [min, max]);
     }
     get targetLeftBound() {
         return this._targetLeft;
@@ -110,7 +110,7 @@ export class SmoothScroll extends Component {
             ? -this.prop.overscroll.max : 0;
         const max = this.maxScrollableHeight
             + (!!this.prop.overscroll && !this.prop.isHorizontal ? this.prop.overscroll.max : 0);
-        this._targetTop = boundVal(val, [min, max]);
+        this._targetTop = clamp(val, [min, max]);
     }
     get targetTopBound() {
         return this._targetTop;
@@ -159,7 +159,7 @@ export class SmoothScroll extends Component {
         return Object.assign(Object.assign({}, super._getDefaultProp()), { selectors: {
                 outer: `#${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,
@@ -180,6 +180,8 @@ export class SmoothScroll extends Component {
         this.resize();
         this.addViewportCallback('', () => {
             this.resize(true);
+        }, {
+            timeout: this.prop.resizeTimeout,
         });
         // wheel
         this.addEventListeners(this.outer, 'wheel', (e) => {
@@ -209,8 +211,8 @@ export class SmoothScroll extends Component {
         // get sizes
         this._clientWidth = outer.clientWidth;
         this._clientHeight = outer.clientHeight;
-        this._scrollWidth = boundVal(container.clientWidth, [this.clientWidth, Infinity]);
-        this._scrollHeight = boundVal(container.clientHeight, [this.clientHeight, Infinity]);
+        this._scrollWidth = clamp(container.clientWidth, [this.clientWidth, Infinity]);
+        this._scrollHeight = clamp(container.clientHeight, [this.clientHeight, Infinity]);
         // force instant change
         // it means that after resizing, scrolling will be instantaneous for a while
         if (native) {

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

@@ -36,7 +36,7 @@ export class SplitText extends Component {
         }
     }
     _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, appendLetters: true, appendLines: false, viewportTarget: '' });
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, appendLetters: true, appendLines: false, viewportTarget: '', resizeTimeout: 0 });
     }
     get prefix() {
         return `${this._app.prefix}split-text`;
@@ -63,6 +63,8 @@ export class SplitText extends Component {
         if (this.prop.appendLines) {
             this.addViewportCallback(this.prop.viewportTarget, () => {
                 this.splitText();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
         }
     }

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

@@ -1,7 +1,7 @@
 import easingProgress from 'easing-progress';
 import { Component } from '../../base/Component';
-import scopeProgress from '../../utils/math/scopeProgress';
-import boundVal from '../../utils/math/boundVal';
+import scoped from '../../utils/math/scoped';
+import clamp from '../../utils/math/clamp';
 /**
  * StaticTimeline is the base class for Timeline itself.
  * The difference between the coponents is that StaticTimeline has no animation:
@@ -75,7 +75,7 @@ export class StaticTimeline extends Component {
         for (let index = 0, l = length; index < l; index += 1) {
             const tm = this._nestedTimelines[index];
             // calculate progress of this very timeline
-            const tmProgress = boundVal(scopeProgress(progressForNested, tm.prop.nestedScope), [0, 1]);
+            const tmProgress = clamp(scoped(progressForNested, tm.prop.nestedScope), [0, 1]);
             tm.progress = tmProgress;
         }
     }

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

@@ -1,5 +1,5 @@
 import { StaticTimeline } from './StaticTimeline';
-import boundVal from '../../utils/math/boundVal';
+import clamp from '../../utils/math/clamp';
 /**
  * Timeline is an animation helper.
  */
@@ -102,7 +102,7 @@ export class Timeline extends StaticTimeline {
         this._animationFrameLastTime = currentTime;
         // calculate current progress
         const progressIterator = frameDiff / this.prop.duration / (isReversed ? -1 : 1);
-        const progressTarget = boundVal(this.progress + progressIterator, [0, 1]);
+        const progressTarget = clamp(this.progress + progressIterator, [0, 1]);
         this.progress = progressTarget;
         // end animation
         if ((progressTarget === 1 && !isReversed)