scrl/dist/index.cjs.map

Page acceleration based scroll animation.

{"version":3,"file":"index.cjs","sources":["../src/index.js"],"sourcesContent":["export default class Scrl {\n    _raf = null;\n    _positionY = 0;\n    _velocityY = 0;\n    _targetPositionY = 0;\n    _targetPositionYWithOffset = 0;\n    _direction = 0;\n\n    constructor(options) {\n        // default options\n        const defaults = {\n            onAlreadyAtPositions: () => {},\n            onCancel: () => {},\n            onEnd: () => {},\n            onStart: () => {},\n            onTick: () => {},\n            friction: .7, // 1 - .3\n            acceleration: .04,\n        }\n\n        // merge options\n        this.options = {\n            ...defaults,\n            ...options,\n        };\n\n        // set reverse friction\n        if (options && options.friction) {\n            this.options.friction = 1 - options.friction;\n        }\n\n        // register listener for cancel on wheel event\n        window.addEventListener('mousewheel', event => {\n            if (this._raf) {\n                this.options.onCancel();\n                cancelAnimationFrame(this._raf);\n                this._raf = null;\n            }\n        }, {\n            passive: true\n        });\n    }\n\n    scrollTo = (offset) => {\n        if (offset && offset.nodeType) {\n            // the offset is element\n            this._targetPositionY = Math.round(offset.getBoundingClientRect().top + window.pageYOffset);\n        } else if (parseInt(this._targetPositionY) === this._targetPositionY) {\n            // the offset is a number\n            this._targetPositionY = Math.round(offset);\n        } else {\n            console.error('Argument must be a number or an element.');\n            return;\n        }\n\n        // don't animate beyond the document height\n        if (this._targetPositionY > document.documentElement.scrollHeight - window.innerHeight) {\n            this._targetPositionY = document.documentElement.scrollHeight - window.innerHeight;\n        }\n\n        // calculated required values\n        this._positionY = document.body.scrollTop || document.documentElement.scrollTop;\n        this._direction = (this._positionY > this._targetPositionY) ? -1 : 1;\n        this._targetPositionYWithOffset = this._targetPositionY + this._direction;\n        this._velocityY = 0;\n\n        if (this._positionY !== this._targetPositionY) {\n            // start animation\n            this.options.onStart();\n            this._animate();\n        } else {\n            // page is already at the position\n            this.options.onAlreadyAtPositions();\n        }\n    };\n\n    _animate = () => {\n        const distance = this._update();\n        this._render();\n\n        if (this._direction === 1 && this._targetPositionY > this._positionY || this._direction === -1 && this._targetPositionY < this._positionY) {\n            // calculate next position\n            this._raf = requestAnimationFrame(this._animate);\n            this.options.onTick();\n        } else {\n            // finish and set position to the final position\n            this._positionY = this._targetPositionY;\n            this._render();\n            this._raf = null;\n            this.options.onTick();\n            this.options.onEnd();\n            // this.triggerEvent('scrollDone')\n        }\n    };\n\n    _update = () => {\n        const distance = this._targetPositionYWithOffset - this._positionY;\n        const attraction = distance * this.options.acceleration;\n\n        this._velocityY += attraction;\n\n        this._velocityY *= this.options.friction;\n        this._positionY += this._velocityY;\n\n        return Math.abs(distance);\n    };\n\n    _render = () => {\n        window.scrollTo(0, this._positionY);\n    };\n}\n"],"names":["options","_raf","_positionY","_velocityY","_targetPositionY","_targetPositionYWithOffset","_direction","scrollTo","offset","nodeType","_this","Math","round","getBoundingClientRect","top","window","pageYOffset","parseInt","console","error","document","documentElement","scrollHeight","innerHeight","body","scrollTop","onStart","_animate","onAlreadyAtPositions","_update","_render","requestAnimationFrame","onTick","onEnd","this","distance","acceleration","friction","abs","_extends","onCancel","addEventListener","event","cancelAnimationFrame","passive"],"mappings":"mPAQI,SAAYA,GAPZC,IAAAA,EAAAA,KAAAA,KAAAA,KAAO,KACPC,KAAAA,WAAa,EACbC,KAAAA,WAAa,EACbC,KAAAA,iBAAmB,EACnBC,KAAAA,2BAA6B,EAC7BC,KAAAA,WAAa,EAqCbC,KAAAA,SAAW,SAACC,GACR,GAAIA,GAAUA,EAAOC,SAEjBC,EAAKN,iBAAmBO,KAAKC,MAAMJ,EAAOK,wBAAwBC,IAAMC,OAAOC,iBACxEC,IAAAA,SAASP,EAAKN,oBAAsBM,EAAKN,iBAKhD,YADAc,QAAQC,MAAM,4CAFdT,EAAKN,iBAAmBO,KAAKC,MAAMJ,EAIvC,CAGIE,EAAKN,iBAAmBgB,SAASC,gBAAgBC,aAAeP,OAAOQ,cACvEb,EAAKN,iBAAmBgB,SAASC,gBAAgBC,aAAeP,OAAOQ,aAI3Eb,EAAKR,WAAakB,SAASI,KAAKC,WAAaL,SAASC,gBAAgBI,UACtEf,EAAKJ,WAAcI,EAAKR,WAAaQ,EAAKN,kBAAqB,EAAI,EACnEM,EAAKL,2BAA6BK,EAAKN,iBAAmBM,EAAKJ,WAC/DI,EAAKP,WAAa,EAEdO,EAAKR,aAAeQ,EAAKN,kBAEzBM,EAAKV,QAAQ0B,UACbhB,EAAKiB,YAGLjB,EAAKV,QAAQ4B,sBAErB,EAEAD,KAAAA,SAAW,WACUjB,EAAKmB,UACtBnB,EAAKoB,UAEmB,IAApBpB,EAAKJ,YAAoBI,EAAKN,iBAAmBM,EAAKR,aAAmC,IAArBQ,EAAKJ,YAAqBI,EAAKN,iBAAmBM,EAAKR,YAE3HQ,EAAKT,KAAO8B,sBAAsBrB,EAAKiB,UACvCjB,EAAKV,QAAQgC,WAGbtB,EAAKR,WAAaQ,EAAKN,iBACvBM,EAAKoB,UACLpB,EAAKT,KAAO,KACZS,EAAKV,QAAQgC,SACbtB,EAAKV,QAAQiC,QAGrB,EAACC,KAEDL,QAAU,WACN,IAAMM,EAAWzB,EAAKL,2BAA6BK,EAAKR,WAQxD,OALAQ,EAAKP,YAFcgC,EAAWzB,EAAKV,QAAQoC,aAI3C1B,EAAKP,YAAcO,EAAKV,QAAQqC,SAChC3B,EAAKR,YAAcQ,EAAKP,WAEjBQ,KAAK2B,IAAIH,EACpB,EAEAL,KAAAA,QAAU,WACNf,OAAOR,SAAS,EAAGG,EAAKR,WAC5B,EAxFIgC,KAAKlC,QAAOuC,EAAA,CAAA,EAXK,CACbX,qBAAsB,WAAQ,EAC9BY,SAAU,WAAM,EAChBP,MAAO,WAAM,EACbP,QAAS,WAAQ,EACjBM,OAAQ,WAAM,EACdK,SAAU,GACVD,aAAc,KAMXpC,GAIHA,GAAWA,EAAQqC,WACnBH,KAAKlC,QAAQqC,SAAW,EAAIrC,EAAQqC,UAIxCtB,OAAO0B,iBAAiB,aAAc,SAAAC,GAC9BhC,EAAKT,OACLS,EAAKV,QAAQwC,WACbG,qBAAqBjC,EAAKT,MAC1BS,EAAKT,KAAO,KAEpB,EAAG,CACC2C,SAAS,GAEjB"}