vevet 2.0.1-dev.3 → 2.0.1-dev.30

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

@@ -25,16 +25,20 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollView = void 0;
-var vevet_dom_1 = require("vevet-dom");
 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
@@ -44,9 +48,11 @@ var ScrollView = /** @class */ (function (_super) {
     function ScrollView(initialProp, init) {
         if (init === void 0) { init = true; }
         var _this = _super.call(this, initialProp, false) || this;
+        _this._scrollEvent = undefined;
+        _this._intersectionObserverIn = undefined;
+        _this._intersectionObserverOut = undefined;
         _this._firstStart = true;
-        // get view elements
-        _this.updateElements();
+        _this._elements = __spreadArray([], _this.prop.elements);
         // initialize the class
         if (init) {
             _this.init();
@@ -61,11 +67,20 @@ var ScrollView = /** @class */ (function (_super) {
         configurable: true
     });
     ScrollView.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, elements: "." + this.prefix + "__el", 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", {
+        /**
+         * Elements to seek
+         */
+        get: function () {
+            return this._elements;
+        },
+        enumerable: false,
+        configurable: true
+    });
     ScrollView.prototype.init = function () {
         _super.prototype.init.call(this);
-        this.seekBounding();
     };
     // Set Module Events
     ScrollView.prototype._setEvents = function () {
@@ -74,20 +89,23 @@ var ScrollView = /** @class */ (function (_super) {
         this.resize();
         this.addViewportCallback('', function () {
             _this.resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
         });
     };
     ScrollView.prototype._onPropMutate = function () {
         _super.prototype._onPropMutate.call(this);
-        this._removeViewEvents();
-        this.updateElements();
-        this._setViewEvents();
+        this.resize();
     };
     /**
      * Resize the scene
      */
     ScrollView.prototype.resize = function () {
         this._removeViewEvents();
-        this._setViewEvents();
+        if (this.prop.enabled) {
+            this._setViewEvents();
+            this.seekBounding();
+        }
     };
     /**
      * Set View events: scroll or intersection
@@ -102,78 +120,56 @@ var ScrollView = /** @class */ (function (_super) {
                 ? 0 : scrollContainerBounding.width * (1 - this.prop.threshold) * -1;
             var yMargin = this._firstStart
                 ? 0 : scrollContainerBounding.height * (1 - this.prop.threshold) * -1;
-            // create intersection observer
-            this._intersectionObserver = new IntersectionObserver(this._handleIntersectionObserver.bind(this), {
+            // create intersection observers
+            this._intersectionObserverIn = new IntersectionObserver(this._handleIntersectionObserverIn.bind(this), {
                 root: this.intersectionRoot,
                 threshold: 0,
                 rootMargin: "0px " + xMargin + "px " + yMargin + "px 0px",
             });
-            // add elements
-            if (this.elements) {
+            this.elements.forEach(function (el) {
+                var _a;
+                (_a = _this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(el);
+            });
+            if (this.prop.states === 'inout') {
+                this._intersectionObserverOut = new IntersectionObserver(this._handleIntersectionObserverOut.bind(this), {
+                    root: this.intersectionRoot,
+                    threshold: 0,
+                    rootMargin: '0px 0px 0px 0px',
+                });
                 this.elements.forEach(function (el) {
                     var _a;
-                    (_a = _this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
+                    (_a = _this._intersectionObserverOut) === null || _a === void 0 ? void 0 : _a.observe(el);
                 });
             }
         }
         else {
             // set scroll bounding events
-            this._scrollEvent = onScroll_1.default(this.prop.container, this._handleScroll.bind(this));
+            this._scrollEvent = onScroll_1.default({
+                container: this.prop.container,
+                callback: this._handleScroll.bind(this),
+            });
         }
     };
     /**
      * Remove View events: scroll or intersection
      */
     ScrollView.prototype._removeViewEvents = function () {
+        var _a, _b;
         // remove scroll events
         if (this._scrollEvent) {
             this._scrollEvent.remove();
             this._scrollEvent = undefined;
         }
-        // destroy intersection observer
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-            this._intersectionObserver = undefined;
-        }
-    };
-    Object.defineProperty(ScrollView.prototype, "elements", {
-        /**
-         * Element to seek
-         */
-        get: function () {
-            return this._elements;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Update elements
-     */
-    ScrollView.prototype.updateElements = function () {
-        var _this = this;
-        // check if elements exist
-        if (typeof this.elements === 'undefined') {
-            this._elements = [];
-        }
-        // unobserve old elements
-        this.elements.forEach(function (el) {
-            if (_this._intersectionObserver) {
-                _this._intersectionObserver.unobserve(el);
-            }
-        });
-        // update elements
-        this._elements = Array.from(vevet_dom_1.selectAll(this.prop.elements, this.domParent || undefined)).filter(function (el) { return !el.classList.contains(_this.prop.classToToggle); });
-        // add them to the observer
-        this._elements.forEach(function (el) {
-            if (_this._intersectionObserver) {
-                _this._intersectionObserver.observe(el);
-            }
-        });
+        // destroy intersection observers
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._intersectionObserverIn = undefined;
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this._intersectionObserverOut = undefined;
     };
     /**
      * Event on IntersectionObserver
      */
-    ScrollView.prototype._handleIntersectionObserver = function (data) {
+    ScrollView.prototype._handleIntersectionObserverIn = function (data) {
         var parentBounding = this._firstStart ? this.scrollContainerBounding : false;
         for (var index = 0; index < data.length; index += 1) {
             var entry = data[index];
@@ -181,7 +177,9 @@ var ScrollView = /** @class */ (function (_super) {
             if (this._firstStart && !!parentBounding && entry.isIntersecting) {
                 delay = this._elementInViewportData(entry.target, parentBounding).delay;
             }
-            this._handleInOut(entry.target, entry.isIntersecting, delay);
+            if (entry.isIntersecting) {
+                this._handleInOut(entry.target, entry.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
         // change states
@@ -190,6 +188,17 @@ var ScrollView = /** @class */ (function (_super) {
             this.resize();
         }
     };
+    /**
+     * Event on IntersectionObserver
+     */
+    ScrollView.prototype._handleIntersectionObserverOut = function (data) {
+        for (var index = 0; index < data.length; index += 1) {
+            var entry = data[index];
+            if (!entry.isIntersecting) {
+                this._handleInOut(entry.target, entry.isIntersecting, 0);
+            }
+        }
+    };
     /**
      * Event on Scroll
      */
@@ -212,7 +221,9 @@ var ScrollView = /** @class */ (function (_super) {
             var el = this.elements[index];
             var elData = this._elementInViewportData(el, scrollContainerBounding);
             var delay = elData.isIntersecting ? elData.delay : 0;
-            this._handleInOut(el, elData.isIntersecting, delay);
+            if (typeof elData.isIntersecting === 'boolean') {
+                this._handleInOut(el, elData.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
         // change states
@@ -228,7 +239,7 @@ var ScrollView = /** @class */ (function (_super) {
         var threshold = this._firstStart ? 1 : propThreshold;
         var bounding = el.getBoundingClientRect();
         // check if the element is intersecting
-        var isIntersecting = false;
+        var isIntersecting;
         if (bounding.top < parentBounding.top + parentBounding.height * threshold
             && bounding.left < parentBounding.left + parentBounding.width * threshold) {
             if (states === 'in') {
@@ -242,11 +253,15 @@ var ScrollView = /** @class */ (function (_super) {
                 isIntersecting = true;
             }
         }
+        else if (bounding.top > parentBounding.top + parentBounding.height
+            || bounding.left > parentBounding.left + parentBounding.width) {
+            isIntersecting = false;
+        }
         // calculate delay only if it is enabled & calculations
         // 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;
@@ -271,9 +286,11 @@ var ScrollView = /** @class */ (function (_super) {
         // update props
         el.scrollViewIn = inViewport;
         // toggle classes
-        timeoutCallback_1.default(function () {
-            el.classList.toggle(_this.prop.classToToggle, inViewport);
-        }, delay);
+        if (this.prop.classToToggle) {
+            timeoutCallback_1.default(function () {
+                el.classList.toggle(_this.prop.classToToggle, inViewport);
+            }, delay);
+        }
         // process callbacks
         if (inViewport && (states === 'in' || states === 'inout')) {
             timeoutCallback_1.default(function () {
@@ -297,12 +314,53 @@ var ScrollView = /** @class */ (function (_super) {
         // remove unused elements
         var elementsToRemove = this._elements.filter(function (el) { return el.scrollViewIn; });
         elementsToRemove.forEach(function (el) {
-            if (_this._intersectionObserver) {
-                _this._intersectionObserver.unobserve(el);
-            }
+            var _a, _b;
+            (_a = _this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(el);
+            (_b = _this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(el);
         });
         this._elements = this._elements.filter(function (el) { return !el.scrollViewIn; });
     };
+    /**
+     * Add a view element
+     */
+    ScrollView.prototype.addElement = function (element) {
+        var _this = this;
+        var _a, _b;
+        var viewEl = element;
+        viewEl.scrollViewIn = undefined;
+        this._elements.push(element);
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(element);
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.observe(element);
+        if (this.prop.enabled) {
+            this.seekBounding();
+        }
+        return {
+            remove: function () {
+                _this.removeElement(element);
+            },
+        };
+    };
+    /**
+     * Remove a view element
+     */
+    ScrollView.prototype.removeElement = function (element) {
+        var _a, _b;
+        var viewEl = element;
+        viewEl.scrollViewIn = undefined;
+        this._elements = this._elements.filter(function (el) { return el !== element; });
+        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(element);
+        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(element);
+    };
+    /**
+     * Remove all view elements
+     */
+    ScrollView.prototype.removeElements = function () {
+        var _this = this;
+        this._elements.forEach(function (el) {
+            _this.removeElement(el);
+        });
+        this._elements = [];
+    };
     /**
      * Destroy the module
      */

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 () {
@@ -22,6 +22,9 @@ var Bar = /** @class */ (function () {
             left: 0,
             top: 0,
         };
+        this._scrollEvent = undefined;
+        this._actionTimeout = undefined;
+        this._dragger = undefined;
         // create outer
         var outerClassNames = prefix + " " + prefix + "_" + dir;
         if (container instanceof Window) {
@@ -153,8 +156,11 @@ var Bar = /** @class */ (function () {
         this._listeners.push(vevet_dom_1.addEventListener(this.outer, 'mouseenter', this._handleHover.bind(this, true)));
         this._listeners.push(vevet_dom_1.addEventListener(this.outer, 'mouseleave', this._handleHover.bind(this, false)));
         // set scroll events
-        this._scrollEvent = onScroll_1.default(this.prop.container, function (data) {
-            _this._handleScroll(data);
+        this._scrollEvent = onScroll_1.default({
+            container: this.prop.container,
+            callback: function (data) {
+                _this._handleScroll(data);
+            },
         });
         // set dragger
         if (this.prop.isDraggable) {
@@ -260,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;
@@ -279,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.
@@ -55,6 +55,8 @@ var SmoothScroll = /** @class */ (function (_super) {
         _this._clientWidth = 0;
         _this._clientHeight = 0;
         _this._instant = false;
+        _this._animationFrame = undefined;
+        _this._outerAnimationFrameEvent = undefined;
         _this._currentFPS = 60;
         // get outer elements
         _this._outer = vevet_dom_1.selectOne(selectors.outer);
@@ -85,9 +87,11 @@ var SmoothScroll = /** @class */ (function (_super) {
         }
         _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();
@@ -145,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
@@ -173,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
@@ -254,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,
@@ -276,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) {
@@ -306,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) {
@@ -320,6 +326,10 @@ var SmoothScroll = /** @class */ (function (_super) {
             this.targetLeft = parseInt(this.targetLeft.toFixed(0), 10);
             this.targetTop = parseInt(this.targetTop.toFixed(0), 10);
         }
+        // set scroll classes
+        var hasScroll = this.maxScrollableHeight > 0 || this.maxScrollableWidth > 0;
+        outer.classList.toggle('has-scroll', hasScroll);
+        outer.classList.toggle('no-scroll', !hasScroll);
         // render elements
         this._updateElementsProp();
         // this.render();

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

@@ -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,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 });
+        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 () {
@@ -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,
             });
         }
     };
@@ -157,6 +163,7 @@ 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) {
@@ -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;
         });
     };
     /**

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.
  */
@@ -44,6 +44,7 @@ var Timeline = /** @class */ (function (_super) {
         _this._isPlaying = false;
         _this._isReversed = false;
         _this._isPaused = false;
+        _this._animationFrame = undefined;
         _this._animationFrameLastTime = 0;
         if (init) {
             _this.init();
@@ -148,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)