lenis 1.1.1 → 1.1.3-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -8
- package/dist/animate.d.ts +20 -0
- package/dist/debounce.d.ts +1 -0
- package/dist/dimensions.d.ts +25 -0
- package/dist/element.d.ts +36 -0
- package/dist/emitter.d.ts +7 -0
- package/dist/id.d.ts +1 -0
- package/dist/lenis-react.mjs.map +1 -1
- package/dist/lenis-snap.d.ts +67 -16
- package/dist/lenis-snap.js +239 -279
- package/dist/lenis-snap.js.map +1 -1
- package/dist/lenis-snap.min.js +1 -1
- package/dist/lenis-snap.min.js.map +1 -1
- package/dist/lenis-snap.mjs +1 -1
- package/dist/lenis-snap.mjs.map +1 -1
- package/dist/lenis.d.ts +29 -33
- package/dist/lenis.js +60 -114
- package/dist/lenis.js.map +1 -1
- package/dist/lenis.min.js +1 -1
- package/dist/lenis.min.js.map +1 -1
- package/dist/lenis.mjs +1 -1
- package/dist/lenis.mjs.map +1 -1
- package/dist/maths.d.ts +5 -0
- package/dist/slide.d.ts +24 -0
- package/dist/uid.d.ts +2 -0
- package/dist/virtual-scroll.d.ts +31 -0
- package/package.json +96 -97
package/dist/lenis-snap.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Lenis=e()}(this,(function(){"use strict";function removeParentSticky(t){"sticky"===getComputedStyle(t).position&&(t.style.setProperty("position","static"),t.dataset.sticky="true"),t.offsetParent&&removeParentSticky(t.offsetParent)}function addParentSticky(t){"true"===t
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Lenis=e()}(this,(function(){"use strict";function removeParentSticky(t){"sticky"===getComputedStyle(t).position&&(t.style.setProperty("position","static"),t.dataset.sticky="true"),t.offsetParent&&removeParentSticky(t.offsetParent)}function addParentSticky(t){var e;"true"===(null===(e=null==t?void 0:t.dataset)||void 0===e?void 0:e.sticky)&&(t.style.removeProperty("position"),delete t.dataset.sticky),t.offsetParent&&addParentSticky(t.offsetParent)}function offsetTop(t,e=0){const i=e+t.offsetTop;return t.offsetParent?offsetTop(t.offsetParent,i):i}function offsetLeft(t,e=0){const i=e+t.offsetLeft;return t.offsetParent?offsetLeft(t.offsetParent,i):i}function scrollTop(t,e=0){const i=e+t.scrollTop;return t.offsetParent?scrollTop(t.offsetParent,i):i+window.scrollY}function scrollLeft(t,e=0){const i=e+t.scrollLeft;return t.offsetParent?scrollLeft(t.offsetParent,i):i+window.scrollX}class SnapElement{constructor(t,{align:e=["start"],ignoreSticky:i=!0,ignoreTransform:s=!1}={}){this.rect={},this.onWrapperResize=()=>{let t,e;if(this.options.ignoreSticky&&removeParentSticky(this.element),this.options.ignoreTransform)t=offsetTop(this.element),e=offsetLeft(this.element);else{const i=this.element.getBoundingClientRect();t=i.top+scrollTop(this.element),e=i.left+scrollLeft(this.element)}this.options.ignoreSticky&&addParentSticky(this.element),this.setRect({top:t,left:e})},this.onResize=([t])=>{const e=t.borderBoxSize[0].inlineSize,i=t.borderBoxSize[0].blockSize;this.setRect({width:e,height:i})},this.element=t,this.options={align:e,ignoreSticky:i,ignoreTransform:s},this.align=[e].flat(),this.wrapperResizeObserver=new ResizeObserver(this.onWrapperResize),this.wrapperResizeObserver.observe(document.body),this.onWrapperResize(),this.resizeObserver=new ResizeObserver(this.onResize),this.resizeObserver.observe(this.element),this.setRect({width:this.element.offsetWidth,height:this.element.offsetHeight})}destroy(){this.wrapperResizeObserver.disconnect(),this.resizeObserver.disconnect()}setRect({top:t,left:e,width:i,height:s,element:o}={}){t=null!=t?t:this.rect.top,e=null!=e?e:this.rect.left,i=null!=i?i:this.rect.width,s=null!=s?s:this.rect.height,o=null!=o?o:this.rect.element,t===this.rect.top&&e===this.rect.left&&i===this.rect.width&&s===this.rect.height&&o===this.rect.element||(this.rect.top=t,this.rect.y=t,this.rect.width=i,this.rect.height=s,this.rect.left=e,this.rect.x=e,this.rect.bottom=t+s,this.rect.right=e+i)}}let t=0;function uid(){return t++}return class Snap{constructor(t,{type:e="mandatory",lerp:i,easing:s,duration:o,velocityThreshold:n=1,onSnapStart:r,onSnapComplete:h}={}){this.isStopped=!1,this.onWindowResize=()=>{this.viewport.width=window.innerWidth,this.viewport.height=window.innerHeight},this.onScroll=({scroll:t,limit:e,lastVelocity:i,velocity:s,isScrolling:o,userData:n,isHorizontal:r})=>{if(this.isStopped)return;const h=Math.abs(i)>Math.abs(s),l=Math.sign(i)!==Math.sign(s)&&0!==s;if(Math.abs(s)<this.options.velocityThreshold&&h&&!l&&"snap"!==(null==n?void 0:n.initiator)){t=Math.ceil(t);let i=[0,...this.snaps.values(),e];this.elements.forEach((({rect:t,align:e})=>{let s;e.forEach((e=>{"start"===e?s=t.top:"center"===e?s=r?t.left+t.width/2-this.viewport.width/2:t.top+t.height/2-this.viewport.height/2:"end"===e&&(s=r?t.left+t.width-this.viewport.width:t.top+t.height-this.viewport.height),void 0!==s&&i.push(Math.ceil(s))}))})),i=i.sort(((t,e)=>Math.abs(t)-Math.abs(e)));let s=i.findLast((e=>e<=t));void 0===s&&(s=i[0]);const o=Math.abs(t-s);let n=i.find((e=>e>=t));void 0===n&&(n=i[i.length-1]);const h=o<Math.abs(t-n)?s:n,l=Math.abs(t-h);("mandatory"===this.options.type||"proximity"===this.options.type&&l<=this.viewport.height)&&this.lenis.scrollTo(h,{lerp:this.options.lerp,easing:this.options.easing,duration:this.options.duration,userData:{initiator:"snap"},onStart:()=>{var t,e;null===(e=(t=this.options).onSnapStart)||void 0===e||e.call(t,h)},onComplete:()=>{var t,e;null===(e=(t=this.options).onSnapComplete)||void 0===e||e.call(t,h)}})}},this.lenis=t,this.options={type:e,lerp:i,easing:s,duration:o,velocityThreshold:n,onSnapStart:r,onSnapComplete:h},this.elements=new Map,this.snaps=new Map,this.viewport={width:window.innerWidth,height:window.innerHeight},this.onWindowResize(),window.addEventListener("resize",this.onWindowResize),this.lenis.on("scroll",this.onScroll)}destroy(){this.lenis.off("scroll",this.onScroll),window.removeEventListener("resize",this.onWindowResize),this.elements.forEach((t=>t.destroy()))}start(){this.isStopped=!1}stop(){this.isStopped=!0}add(t){const e=uid();return this.snaps.set(e,t),()=>this.remove(e)}remove(t){this.snaps.delete(t)}addElement(t,e={}){const i=uid();return this.elements.set(i,new SnapElement(t,e)),()=>this.removeElement(i)}removeElement(t){this.elements.delete(t)}}}));
|
|
2
2
|
//# sourceMappingURL=lenis-snap.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lenis-snap.min.js","sources":["../src/slide.js","../src/index.ts"],"sourcesContent":["function removeParentSticky(element) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent)\r\n }\r\n}\r\n\r\nfunction offsetTop(element, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport default class Slide {\r\n constructor(\r\n element,\r\n { align = ['start'], ignoreSticky = true, ignoreTransform = false } = {}\r\n ) {\r\n this.element = element\r\n\r\n this.ignoreSticky = ignoreSticky\r\n this.ignoreTransform = ignoreTransform\r\n\r\n this.align = [align].flat()\r\n\r\n this.rect = {}\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({ top, left, width, height, element }) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.ignoreSticky) removeParentSticky(this.element)\r\n if (this.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]) => {\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","import Slide from './slide'\r\n\r\n// TODO:\r\n// - horizontal\r\n// - fix trackpad snapping too soon due to velocity (fuck Apple)\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - fix touch scroll, do not snap when not released\r\n\r\nexport default class Snap {\r\n constructor(\r\n lenis,\r\n {\r\n type = 'mandatory',\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold = 1,\r\n onSnapStart,\r\n onSnapComplete,\r\n } = {}\r\n ) {\r\n this.lenis = lenis\r\n\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold,\r\n }\r\n\r\n this.type = type\r\n this.elements = new Map()\r\n this.snaps = new Map()\r\n\r\n this.velocityThreshold = velocityThreshold\r\n this.onSnapStart = onSnapStart\r\n this.onSnapComplete = onSnapComplete\r\n\r\n this.viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize)\r\n\r\n this.lenis.on('scroll', this.onScroll)\r\n }\r\n\r\n // debug() {\r\n // const element = document.createElement('div')\r\n // element.style.cssText = `\r\n // position: fixed;\r\n // background: red;\r\n // border-bottom: 1px solid red;\r\n // left: 0;\r\n // right: 0;\r\n // top: 0;\r\n // z-index: 9999;\r\n // `\r\n // document.body.appendChild(element)\r\n // }\r\n\r\n destroy() {\r\n this.lenis.off('scroll', this.onScroll)\r\n window.removeEventListener('resize', this.onWindowResize)\r\n this.elements.forEach((slide) => slide.destroy())\r\n }\r\n\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n add(value) {\r\n const id = crypto.randomUUID()\r\n\r\n this.snaps.set(id, value)\r\n\r\n return () => this.remove(id)\r\n }\r\n\r\n remove(id) {\r\n this.snaps.delete(id)\r\n }\r\n\r\n addElement(element, options = {}) {\r\n const id = crypto.randomUUID()\r\n\r\n this.elements.set(id, new Slide(element, options))\r\n\r\n return () => this.removeElement(id)\r\n }\r\n\r\n removeElement(id) {\r\n this.elements.delete(id)\r\n }\r\n\r\n onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n onScroll = ({\r\n scroll,\r\n limit,\r\n lastVelocity,\r\n velocity,\r\n isScrolling,\r\n isTouching,\r\n userData,\r\n }) => {\r\n if (this.isStopped) return\r\n // console.log(scroll, velocity, type)\r\n\r\n // return\r\n const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity)\r\n const isTurningBack =\r\n Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0\r\n\r\n // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating })\r\n\r\n // console.log('onScroll')\r\n\r\n if (\r\n Math.abs(velocity) < this.velocityThreshold &&\r\n // !isTouching &&\r\n isDecelerating &&\r\n !isTurningBack &&\r\n userData?.initiator !== 'snap'\r\n ) {\r\n scroll = Math.ceil(scroll)\r\n\r\n let snaps = [0, ...this.snaps.values(), limit]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let snap\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n snap = rect.top\r\n } else if (align === 'center') {\r\n snap = rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n snap = rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (snap !== undefined) {\r\n snaps.push(Math.ceil(snap))\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b))\r\n\r\n let prevSnap = snaps.findLast((snap) => snap <= scroll)\r\n if (prevSnap === undefined) prevSnap = snaps[0]\r\n const distanceToPrevSnap = Math.abs(scroll - prevSnap)\r\n\r\n let nextSnap = snaps.find((snap) => snap >= scroll)\r\n if (nextSnap === undefined) nextSnap = snaps[snaps.length - 1]\r\n const distanceToNextSnap = Math.abs(scroll - nextSnap)\r\n\r\n const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap\r\n\r\n const distance = Math.abs(scroll - snap)\r\n\r\n if (\r\n this.type === 'mandatory' ||\r\n (this.type === 'proximity' && distance <= this.viewport.height)\r\n ) {\r\n // this.__isScrolling = true\r\n // this.onSnapStart?.(snap)\r\n\r\n // console.log('scroll to')\r\n\r\n this.lenis.scrollTo(snap, {\r\n lerp: this.options.lerp,\r\n easing: this.options.easing,\r\n duration: this.options.duration,\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.onSnapStart?.(snap)\r\n },\r\n onComplete: () => {\r\n this.onSnapComplete?.(snap)\r\n },\r\n })\r\n }\r\n\r\n // console.timeEnd('scroll')\r\n }\r\n }\r\n}\r\n"],"names":["removeParentSticky","element","getComputedStyle","position","style","setProperty","dataset","sticky","offsetParent","addParentSticky","removeProperty","offsetTop","accumulator","top","offsetLeft","left","scrollTop","window","scrollY","scrollLeft","scrollX","Slide","constructor","align","ignoreSticky","ignoreTransform","this","flat","rect","wrapperResizeObserver","ResizeObserver","onWrapperResize","observe","document","body","resizeObserver","onResize","destroy","disconnect","setRect","width","height","y","x","bottom","right","getBoundingClientRect","entry","borderBoxSize","inlineSize","blockSize","Snap","lenis","type","lerp","easing","duration","velocityThreshold","onSnapStart","onSnapComplete","onWindowResize","viewport","innerWidth","innerHeight","onScroll","scroll","limit","lastVelocity","velocity","isScrolling","isTouching","userData","isStopped","isDecelerating","Math","abs","isTurningBack","sign","initiator","ceil","snaps","values","elements","forEach","snap","undefined","push","sort","a","b","prevSnap","findLast","distanceToPrevSnap","nextSnap","find","length","distance","scrollTo","options","onStart","_a","call","onComplete","Map","addEventListener","on","off","removeEventListener","slide","start","stop","add","value","id","crypto","randomUUID","set","remove","delete","addElement","removeElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lenis-snap.min.js","sources":["../src/element.ts","../src/uid.ts","../src/index.ts"],"sourcesContent":["function removeParentSticky(element: HTMLElement) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element: HTMLElement) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction offsetTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport type SnapElementOptions = {\r\n align?: string[]\r\n ignoreSticky?: boolean\r\n ignoreTransform?: boolean\r\n}\r\n\r\ntype Rect = {\r\n top: number\r\n left: number\r\n width: number\r\n height: number\r\n x: number\r\n y: number\r\n bottom: number\r\n right: number\r\n element: HTMLElement\r\n}\r\n\r\nexport class SnapElement {\r\n element: HTMLElement\r\n options: SnapElementOptions\r\n align: string[]\r\n // @ts-ignore\r\n rect: Rect = {}\r\n wrapperResizeObserver: ResizeObserver\r\n resizeObserver: ResizeObserver\r\n\r\n constructor(\r\n element: HTMLElement,\r\n {\r\n align = ['start'],\r\n ignoreSticky = true,\r\n ignoreTransform = false,\r\n }: SnapElementOptions = {}\r\n ) {\r\n this.element = element\r\n\r\n this.options = { align, ignoreSticky, ignoreTransform }\r\n\r\n // this.ignoreSticky = ignoreSticky\r\n // this.ignoreTransform = ignoreTransform\r\n\r\n this.align = [align].flat()\r\n\r\n // TODO: assing rect immediately\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n this.onWrapperResize()\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n this.setRect({\r\n width: this.element.offsetWidth,\r\n height: this.element.offsetHeight,\r\n })\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({\r\n top,\r\n left,\r\n width,\r\n height,\r\n element,\r\n }: {\r\n top?: number\r\n left?: number\r\n width?: number\r\n height?: number\r\n element?: HTMLElement\r\n } = {}) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.options.ignoreSticky) removeParentSticky(this.element)\r\n if (this.options.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.options.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]: ResizeObserverEntry[]) => {\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","let index = 0\r\n\r\nexport type UID = number\r\n\r\nexport function uid(): UID {\r\n return index++\r\n}\r\n","import Lenis from 'lenis'\r\nimport { SnapElement, SnapElementOptions } from './element'\r\nimport { UID, uid } from './uid'\r\n\r\n// TODO:\r\n// - horizontal\r\n// - fix trackpad snapping too soon due to velocity (fuck Apple)\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - fix touch scroll, do not snap when not released\r\n// - arrow, spacebar\r\n\r\ntype Viewport = {\r\n width: number\r\n height: number\r\n}\r\n\r\nexport type SnapOptions = {\r\n type?: 'mandatory' | 'proximity'\r\n lerp?: number\r\n easing?: (t: number) => number\r\n duration?: number\r\n velocityThreshold?: number\r\n onSnapStart?: (t: number) => number\r\n onSnapComplete?: (t: number) => number\r\n}\r\n\r\nexport default class Snap {\r\n lenis: Lenis\r\n options: SnapOptions\r\n elements: Map<UID, SnapElement>\r\n snaps: Map<UID, number>\r\n viewport: Viewport\r\n isStopped: Boolean = false\r\n\r\n constructor(\r\n lenis: Lenis,\r\n {\r\n type = 'mandatory',\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold = 1,\r\n onSnapStart,\r\n onSnapComplete,\r\n }: SnapOptions = {}\r\n ) {\r\n this.lenis = lenis\r\n\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold,\r\n onSnapStart,\r\n onSnapComplete,\r\n }\r\n\r\n this.elements = new Map()\r\n this.snaps = new Map()\r\n\r\n this.viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize)\r\n\r\n this.lenis.on('scroll', this.onScroll)\r\n }\r\n\r\n // debug() {\r\n // const element = document.createElement('div')\r\n // element.style.cssText = `\r\n // position: fixed;\r\n // background: red;\r\n // border-bottom: 1px solid red;\r\n // left: 0;\r\n // right: 0;\r\n // top: 0;\r\n // z-index: 9999;\r\n // `\r\n // document.body.appendChild(element)\r\n // }\r\n\r\n destroy() {\r\n this.lenis.off('scroll', this.onScroll)\r\n window.removeEventListener('resize', this.onWindowResize)\r\n this.elements.forEach((element) => element.destroy())\r\n }\r\n\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n add(value: number) {\r\n const id = uid()\r\n\r\n this.snaps.set(id, value)\r\n\r\n return () => this.remove(id)\r\n }\r\n\r\n remove(id: UID) {\r\n this.snaps.delete(id)\r\n }\r\n\r\n addElement(element: HTMLElement, options = {} as SnapElementOptions) {\r\n const id = uid()\r\n\r\n this.elements.set(id, new SnapElement(element, options))\r\n\r\n return () => this.removeElement(id)\r\n }\r\n\r\n removeElement(id: UID) {\r\n this.elements.delete(id)\r\n }\r\n\r\n onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n onScroll = ({\r\n scroll,\r\n limit,\r\n lastVelocity,\r\n velocity,\r\n isScrolling,\r\n userData,\r\n isHorizontal,\r\n }) => {\r\n if (this.isStopped) return\r\n // console.log(scroll, velocity, type)\r\n\r\n // return\r\n const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity)\r\n const isTurningBack =\r\n Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0\r\n\r\n // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating })\r\n\r\n // console.log('onScroll')\r\n\r\n if (\r\n Math.abs(velocity) < this.options.velocityThreshold &&\r\n // !isTouching &&\r\n isDecelerating &&\r\n !isTurningBack &&\r\n userData?.initiator !== 'snap'\r\n ) {\r\n scroll = Math.ceil(scroll)\r\n\r\n let snaps = [0, ...this.snaps.values(), limit] as number[]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let snap: number | undefined\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n snap = rect.top\r\n } else if (align === 'center') {\r\n snap = isHorizontal\r\n ? rect.left + rect.width / 2 - this.viewport.width / 2\r\n : rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n snap = isHorizontal\r\n ? rect.left + rect.width - this.viewport.width\r\n : rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (snap !== undefined) {\r\n snaps.push(Math.ceil(snap))\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b))\r\n\r\n let prevSnap = snaps.findLast((snap) => snap <= scroll)\r\n if (prevSnap === undefined) prevSnap = snaps[0]\r\n const distanceToPrevSnap = Math.abs(scroll - prevSnap)\r\n\r\n let nextSnap = snaps.find((snap) => snap >= scroll)\r\n if (nextSnap === undefined) nextSnap = snaps[snaps.length - 1]\r\n const distanceToNextSnap = Math.abs(scroll - nextSnap)\r\n\r\n const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap\r\n\r\n const distance = Math.abs(scroll - snap)\r\n\r\n if (\r\n this.options.type === 'mandatory' ||\r\n (this.options.type === 'proximity' && distance <= this.viewport.height)\r\n ) {\r\n // this.__isScrolling = true\r\n // this.onSnapStart?.(snap)\r\n\r\n // console.log('scroll to')\r\n\r\n this.lenis.scrollTo(snap, {\r\n lerp: this.options.lerp,\r\n easing: this.options.easing,\r\n duration: this.options.duration,\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.options.onSnapStart?.(snap)\r\n },\r\n onComplete: () => {\r\n this.options.onSnapComplete?.(snap)\r\n },\r\n })\r\n }\r\n\r\n // console.timeEnd('scroll')\r\n }\r\n }\r\n}\r\n"],"names":["removeParentSticky","element","getComputedStyle","position","style","setProperty","dataset","sticky","offsetParent","addParentSticky","_a","removeProperty","offsetTop","accumulator","top","offsetLeft","left","scrollTop","window","scrollY","scrollLeft","scrollX","SnapElement","constructor","align","ignoreSticky","ignoreTransform","this","rect","onWrapperResize","options","getBoundingClientRect","setRect","onResize","entry","width","borderBoxSize","inlineSize","height","blockSize","flat","wrapperResizeObserver","ResizeObserver","observe","document","body","resizeObserver","offsetWidth","offsetHeight","destroy","disconnect","y","x","bottom","right","index","uid","Snap","lenis","type","lerp","easing","duration","velocityThreshold","onSnapStart","onSnapComplete","isStopped","onWindowResize","viewport","innerWidth","innerHeight","onScroll","scroll","limit","lastVelocity","velocity","isScrolling","userData","isHorizontal","isDecelerating","Math","abs","isTurningBack","sign","initiator","ceil","snaps","values","elements","forEach","snap","undefined","push","sort","a","b","prevSnap","findLast","distanceToPrevSnap","nextSnap","find","length","distance","scrollTo","onStart","_b","call","onComplete","Map","addEventListener","on","off","removeEventListener","start","stop","add","value","id","set","remove","delete","addElement","removeElement"],"mappings":"sOAAA,SAASA,mBAAmBC,GAGI,WAFbC,iBAAiBD,GAASE,WAKzCF,EAAQG,MAAMC,YAAY,WAAY,UACtCJ,EAAQK,QAAQC,OAAS,QAGvBN,EAAQO,cACVR,mBAAmBC,EAAQO,aAE/B,CAEA,SAASC,gBAAgBR,SACU,UAAX,QAAlBS,EAAAT,aAAA,EAAAA,EAASK,eAAS,IAAAI,OAAA,EAAAA,EAAAH,UACpBN,EAAQG,MAAMO,eAAe,mBACtBV,EAAQK,QAAQC,QAGrBN,EAAQO,cACVC,gBAAgBR,EAAQO,aAE5B,CAEA,SAASI,UAAUX,EAAsBY,EAAc,GACrD,MAAMC,EAAMD,EAAcZ,EAAQW,UAClC,OAAIX,EAAQO,aACHI,UAAUX,EAAQO,aAA6BM,GAEjDA,CACT,CAEA,SAASC,WAAWd,EAAsBY,EAAc,GACtD,MAAMG,EAAOH,EAAcZ,EAAQc,WACnC,OAAId,EAAQO,aACHO,WAAWd,EAAQO,aAA6BQ,GAElDA,CACT,CAEA,SAASC,UAAUhB,EAAsBY,EAAc,GACrD,MAAMC,EAAMD,EAAcZ,EAAQgB,UAClC,OAAIhB,EAAQO,aACHS,UAAUhB,EAAQO,aAA6BM,GAEjDA,EAAMI,OAAOC,OACtB,CAEA,SAASC,WAAWnB,EAAsBY,EAAc,GACtD,MAAMG,EAAOH,EAAcZ,EAAQmB,WACnC,OAAInB,EAAQO,aACHY,WAAWnB,EAAQO,aAA6BQ,GAElDA,EAAOE,OAAOG,OACvB,OAoBaC,YASX,WAAAC,CACEtB,GACAuB,MACEA,EAAQ,CAAC,SAAQC,aACjBA,GAAe,EAAIC,gBACnBA,GAAkB,GACI,CAAA,GAV1BC,KAAIC,KAAS,GA8EbD,KAAeE,gBAAG,KAChB,IAAIf,EAAKE,EAGT,GADIW,KAAKG,QAAQL,cAAczB,mBAAmB2B,KAAK1B,SACnD0B,KAAKG,QAAQJ,gBACfZ,EAAMF,UAAUe,KAAK1B,SACrBe,EAAOD,WAAWY,KAAK1B,aAClB,CACL,MAAM2B,EAAOD,KAAK1B,QAAQ8B,wBAC1BjB,EAAMc,EAAKd,IAAMG,UAAUU,KAAK1B,SAChCe,EAAOY,EAAKZ,KAAOI,WAAWO,KAAK1B,QACpC,CACG0B,KAAKG,QAAQL,cAAchB,gBAAgBkB,KAAK1B,SAEpD0B,KAAKK,QAAQ,CAAElB,MAAKE,QAAO,EAG7BW,KAAAM,SAAW,EAAEC,MACX,MAAMC,EAAQD,EAAME,cAAc,GAAGC,WAC/BC,EAASJ,EAAME,cAAc,GAAGG,UAEtCZ,KAAKK,QAAQ,CAAEG,QAAOG,UAAS,EAvF/BX,KAAK1B,QAAUA,EAEf0B,KAAKG,QAAU,CAAEN,QAAOC,eAAcC,mBAKtCC,KAAKH,MAAQ,CAACA,GAAOgB,OAIrBb,KAAKc,sBAAwB,IAAIC,eAAef,KAAKE,iBACrDF,KAAKc,sBAAsBE,QAAQC,SAASC,MAC5ClB,KAAKE,kBAELF,KAAKmB,eAAiB,IAAIJ,eAAef,KAAKM,UAC9CN,KAAKmB,eAAeH,QAAQhB,KAAK1B,SACjC0B,KAAKK,QAAQ,CACXG,MAAOR,KAAK1B,QAAQ8C,YACpBT,OAAQX,KAAK1B,QAAQ+C,cAExB,CAED,OAAAC,GACEtB,KAAKc,sBAAsBS,aAC3BvB,KAAKmB,eAAeI,YACrB,CAED,OAAAlB,EAAQlB,IACNA,EAAGE,KACHA,EAAImB,MACJA,EAAKG,OACLA,EAAMrC,QACNA,GAOE,IACFa,EAAMA,QAAAA,EAAOa,KAAKC,KAAKd,IACvBE,EAAOA,QAAAA,EAAQW,KAAKC,KAAKZ,KACzBmB,EAAQA,QAAAA,EAASR,KAAKC,KAAKO,MAC3BG,EAASA,QAAAA,EAAUX,KAAKC,KAAKU,OAC7BrC,EAAUA,QAAAA,EAAW0B,KAAKC,KAAK3B,QAG7Ba,IAAQa,KAAKC,KAAKd,KAClBE,IAASW,KAAKC,KAAKZ,MACnBmB,IAAUR,KAAKC,KAAKO,OACpBG,IAAWX,KAAKC,KAAKU,QACrBrC,IAAY0B,KAAKC,KAAK3B,UAIxB0B,KAAKC,KAAKd,IAAMA,EAChBa,KAAKC,KAAKuB,EAAIrC,EACda,KAAKC,KAAKO,MAAQA,EAClBR,KAAKC,KAAKU,OAASA,EACnBX,KAAKC,KAAKZ,KAAOA,EACjBW,KAAKC,KAAKwB,EAAIpC,EACdW,KAAKC,KAAKyB,OAASvC,EAAMwB,EACzBX,KAAKC,KAAK0B,MAAQtC,EAAOmB,EAC1B,EC7JH,IAAIoB,EAAQ,WAIIC,MACd,OAAOD,GACT,QCoBc,MAAOE,KAQnB,WAAAlC,CACEmC,GACAC,KACEA,EAAO,YAAWC,KAClBA,EAAIC,OACJA,EAAMC,SACNA,EAAQC,kBACRA,EAAoB,EAACC,YACrBA,EAAWC,eACXA,GACe,CAAA,GAZnBtC,KAASuC,WAAY,EA2FrBvC,KAAcwC,eAAG,KACfxC,KAAKyC,SAASjC,MAAQjB,OAAOmD,WAC7B1C,KAAKyC,SAAS9B,OAASpB,OAAOoD,WAAW,EAG3C3C,KAAA4C,SAAW,EACTC,SACAC,QACAC,eACAC,WACAC,cACAC,WACAC,mBAEA,GAAInD,KAAKuC,UAAW,OAIpB,MAAMa,EAAiBC,KAAKC,IAAIP,GAAgBM,KAAKC,IAAIN,GACnDO,EACJF,KAAKG,KAAKT,KAAkBM,KAAKG,KAAKR,IAA0B,IAAbA,EAMrD,GACEK,KAAKC,IAAIN,GAAYhD,KAAKG,QAAQiC,mBAElCgB,IACCG,GACuB,UAAxBL,aAAA,EAAAA,EAAUO,WACV,CACAZ,EAASQ,KAAKK,KAAKb,GAEnB,IAAIc,EAAQ,CAAC,KAAM3D,KAAK2D,MAAMC,SAAUd,GAExC9C,KAAK6D,SAASC,SAAQ,EAAG7D,OAAMJ,YAC7B,IAAIkE,EAEJlE,EAAMiE,SAASjE,IACC,UAAVA,EACFkE,EAAO9D,EAAKd,IACO,WAAVU,EACTkE,EAAOZ,EACHlD,EAAKZ,KAAOY,EAAKO,MAAQ,EAAIR,KAAKyC,SAASjC,MAAQ,EACnDP,EAAKd,IAAMc,EAAKU,OAAS,EAAIX,KAAKyC,SAAS9B,OAAS,EACrC,QAAVd,IACTkE,EAAOZ,EACHlD,EAAKZ,KAAOY,EAAKO,MAAQR,KAAKyC,SAASjC,MACvCP,EAAKd,IAAMc,EAAKU,OAASX,KAAKyC,SAAS9B,aAGhCqD,IAATD,GACFJ,EAAMM,KAAKZ,KAAKK,KAAKK,GACtB,GACD,IAGJJ,EAAQA,EAAMO,MAAK,CAACC,EAAGC,IAAMf,KAAKC,IAAIa,GAAKd,KAAKC,IAAIc,KAEpD,IAAIC,EAAWV,EAAMW,UAAUP,GAASA,GAAQlB,SAC/BmB,IAAbK,IAAwBA,EAAWV,EAAM,IAC7C,MAAMY,EAAqBlB,KAAKC,IAAIT,EAASwB,GAE7C,IAAIG,EAAWb,EAAMc,MAAMV,GAASA,GAAQlB,SAC3BmB,IAAbQ,IAAwBA,EAAWb,EAAMA,EAAMe,OAAS,IAC5D,MAEMX,EAAOQ,EAFclB,KAAKC,IAAIT,EAAS2B,GAEUH,EAAWG,EAE5DG,EAAWtB,KAAKC,IAAIT,EAASkB,IAGX,cAAtB/D,KAAKG,QAAQ6B,MACU,cAAtBhC,KAAKG,QAAQ6B,MAAwB2C,GAAY3E,KAAKyC,SAAS9B,SAOhEX,KAAK+B,MAAM6C,SAASb,EAAM,CACxB9B,KAAMjC,KAAKG,QAAQ8B,KACnBC,OAAQlC,KAAKG,QAAQ+B,OACrBC,SAAUnC,KAAKG,QAAQgC,SACvBe,SAAU,CAAEO,UAAW,QACvBoB,QAAS,aACiB,QAAxBC,GAAA/F,EAAAiB,KAAKG,SAAQkC,mBAAW,IAAAyC,GAAAA,EAAAC,KAAAhG,EAAGgF,EAAK,EAElCiB,WAAY,aACiB,QAA3BF,GAAA/F,EAAAiB,KAAKG,SAAQmC,sBAAc,IAAAwC,GAAAA,EAAAC,KAAAhG,EAAGgF,EAAK,GAM1C,GA9KD/D,KAAK+B,MAAQA,EAEb/B,KAAKG,QAAU,CACb6B,OACAC,OACAC,SACAC,WACAC,oBACAC,cACAC,kBAGFtC,KAAK6D,SAAW,IAAIoB,IACpBjF,KAAK2D,MAAQ,IAAIsB,IAEjBjF,KAAKyC,SAAW,CACdjC,MAAOjB,OAAOmD,WACd/B,OAAQpB,OAAOoD,aAEjB3C,KAAKwC,iBACLjD,OAAO2F,iBAAiB,SAAUlF,KAAKwC,gBAEvCxC,KAAK+B,MAAMoD,GAAG,SAAUnF,KAAK4C,SAC9B,CAgBD,OAAAtB,GACEtB,KAAK+B,MAAMqD,IAAI,SAAUpF,KAAK4C,UAC9BrD,OAAO8F,oBAAoB,SAAUrF,KAAKwC,gBAC1CxC,KAAK6D,SAASC,SAASxF,GAAYA,EAAQgD,WAC5C,CAED,KAAAgE,GACEtF,KAAKuC,WAAY,CAClB,CAED,IAAAgD,GACEvF,KAAKuC,WAAY,CAClB,CAED,GAAAiD,CAAIC,GACF,MAAMC,EAAK7D,MAIX,OAFA7B,KAAK2D,MAAMgC,IAAID,EAAID,GAEZ,IAAMzF,KAAK4F,OAAOF,EAC1B,CAED,MAAAE,CAAOF,GACL1F,KAAK2D,MAAMkC,OAAOH,EACnB,CAED,UAAAI,CAAWxH,EAAsB6B,EAAU,IACzC,MAAMuF,EAAK7D,MAIX,OAFA7B,KAAK6D,SAAS8B,IAAID,EAAI,IAAI/F,YAAYrB,EAAS6B,IAExC,IAAMH,KAAK+F,cAAcL,EACjC,CAED,aAAAK,CAAcL,GACZ1F,KAAK6D,SAASgC,OAAOH,EACtB"}
|
package/dist/lenis-snap.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function removeParentSticky(t){"sticky"===getComputedStyle(t).position&&(t.style.setProperty("position","static"),t.dataset.sticky="true"),t.offsetParent&&removeParentSticky(t.offsetParent)}function addParentSticky(t){"true"===t
|
|
1
|
+
function removeParentSticky(t){"sticky"===getComputedStyle(t).position&&(t.style.setProperty("position","static"),t.dataset.sticky="true"),t.offsetParent&&removeParentSticky(t.offsetParent)}function addParentSticky(t){var e;"true"===(null===(e=null==t?void 0:t.dataset)||void 0===e?void 0:e.sticky)&&(t.style.removeProperty("position"),delete t.dataset.sticky),t.offsetParent&&addParentSticky(t.offsetParent)}function offsetTop(t,e=0){const i=e+t.offsetTop;return t.offsetParent?offsetTop(t.offsetParent,i):i}function offsetLeft(t,e=0){const i=e+t.offsetLeft;return t.offsetParent?offsetLeft(t.offsetParent,i):i}function scrollTop(t,e=0){const i=e+t.scrollTop;return t.offsetParent?scrollTop(t.offsetParent,i):i+window.scrollY}function scrollLeft(t,e=0){const i=e+t.scrollLeft;return t.offsetParent?scrollLeft(t.offsetParent,i):i+window.scrollX}class SnapElement{constructor(t,{align:e=["start"],ignoreSticky:i=!0,ignoreTransform:s=!1}={}){this.rect={},this.onWrapperResize=()=>{let t,e;if(this.options.ignoreSticky&&removeParentSticky(this.element),this.options.ignoreTransform)t=offsetTop(this.element),e=offsetLeft(this.element);else{const i=this.element.getBoundingClientRect();t=i.top+scrollTop(this.element),e=i.left+scrollLeft(this.element)}this.options.ignoreSticky&&addParentSticky(this.element),this.setRect({top:t,left:e})},this.onResize=([t])=>{const e=t.borderBoxSize[0].inlineSize,i=t.borderBoxSize[0].blockSize;this.setRect({width:e,height:i})},this.element=t,this.options={align:e,ignoreSticky:i,ignoreTransform:s},this.align=[e].flat(),this.wrapperResizeObserver=new ResizeObserver(this.onWrapperResize),this.wrapperResizeObserver.observe(document.body),this.onWrapperResize(),this.resizeObserver=new ResizeObserver(this.onResize),this.resizeObserver.observe(this.element),this.setRect({width:this.element.offsetWidth,height:this.element.offsetHeight})}destroy(){this.wrapperResizeObserver.disconnect(),this.resizeObserver.disconnect()}setRect({top:t,left:e,width:i,height:s,element:o}={}){t=null!=t?t:this.rect.top,e=null!=e?e:this.rect.left,i=null!=i?i:this.rect.width,s=null!=s?s:this.rect.height,o=null!=o?o:this.rect.element,t===this.rect.top&&e===this.rect.left&&i===this.rect.width&&s===this.rect.height&&o===this.rect.element||(this.rect.top=t,this.rect.y=t,this.rect.width=i,this.rect.height=s,this.rect.left=e,this.rect.x=e,this.rect.bottom=t+s,this.rect.right=e+i)}}let t=0;function uid(){return t++}class Snap{constructor(t,{type:e="mandatory",lerp:i,easing:s,duration:o,velocityThreshold:n=1,onSnapStart:r,onSnapComplete:h}={}){this.isStopped=!1,this.onWindowResize=()=>{this.viewport.width=window.innerWidth,this.viewport.height=window.innerHeight},this.onScroll=({scroll:t,limit:e,lastVelocity:i,velocity:s,isScrolling:o,userData:n,isHorizontal:r})=>{if(this.isStopped)return;const h=Math.abs(i)>Math.abs(s),l=Math.sign(i)!==Math.sign(s)&&0!==s;if(Math.abs(s)<this.options.velocityThreshold&&h&&!l&&"snap"!==(null==n?void 0:n.initiator)){t=Math.ceil(t);let i=[0,...this.snaps.values(),e];this.elements.forEach((({rect:t,align:e})=>{let s;e.forEach((e=>{"start"===e?s=t.top:"center"===e?s=r?t.left+t.width/2-this.viewport.width/2:t.top+t.height/2-this.viewport.height/2:"end"===e&&(s=r?t.left+t.width-this.viewport.width:t.top+t.height-this.viewport.height),void 0!==s&&i.push(Math.ceil(s))}))})),i=i.sort(((t,e)=>Math.abs(t)-Math.abs(e)));let s=i.findLast((e=>e<=t));void 0===s&&(s=i[0]);const o=Math.abs(t-s);let n=i.find((e=>e>=t));void 0===n&&(n=i[i.length-1]);const h=o<Math.abs(t-n)?s:n,l=Math.abs(t-h);("mandatory"===this.options.type||"proximity"===this.options.type&&l<=this.viewport.height)&&this.lenis.scrollTo(h,{lerp:this.options.lerp,easing:this.options.easing,duration:this.options.duration,userData:{initiator:"snap"},onStart:()=>{var t,e;null===(e=(t=this.options).onSnapStart)||void 0===e||e.call(t,h)},onComplete:()=>{var t,e;null===(e=(t=this.options).onSnapComplete)||void 0===e||e.call(t,h)}})}},this.lenis=t,this.options={type:e,lerp:i,easing:s,duration:o,velocityThreshold:n,onSnapStart:r,onSnapComplete:h},this.elements=new Map,this.snaps=new Map,this.viewport={width:window.innerWidth,height:window.innerHeight},this.onWindowResize(),window.addEventListener("resize",this.onWindowResize),this.lenis.on("scroll",this.onScroll)}destroy(){this.lenis.off("scroll",this.onScroll),window.removeEventListener("resize",this.onWindowResize),this.elements.forEach((t=>t.destroy()))}start(){this.isStopped=!1}stop(){this.isStopped=!0}add(t){const e=uid();return this.snaps.set(e,t),()=>this.remove(e)}remove(t){this.snaps.delete(t)}addElement(t,e={}){const i=uid();return this.elements.set(i,new SnapElement(t,e)),()=>this.removeElement(i)}removeElement(t){this.elements.delete(t)}}export{Snap as default};
|
|
2
2
|
//# sourceMappingURL=lenis-snap.mjs.map
|
package/dist/lenis-snap.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lenis-snap.mjs","sources":["../src/slide.js","../src/index.ts"],"sourcesContent":["function removeParentSticky(element) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent)\r\n }\r\n}\r\n\r\nfunction offsetTop(element, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport default class Slide {\r\n constructor(\r\n element,\r\n { align = ['start'], ignoreSticky = true, ignoreTransform = false } = {}\r\n ) {\r\n this.element = element\r\n\r\n this.ignoreSticky = ignoreSticky\r\n this.ignoreTransform = ignoreTransform\r\n\r\n this.align = [align].flat()\r\n\r\n this.rect = {}\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({ top, left, width, height, element }) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.ignoreSticky) removeParentSticky(this.element)\r\n if (this.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]) => {\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","import Slide from './slide'\r\n\r\n// TODO:\r\n// - horizontal\r\n// - fix trackpad snapping too soon due to velocity (fuck Apple)\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - fix touch scroll, do not snap when not released\r\n\r\nexport default class Snap {\r\n constructor(\r\n lenis,\r\n {\r\n type = 'mandatory',\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold = 1,\r\n onSnapStart,\r\n onSnapComplete,\r\n } = {}\r\n ) {\r\n this.lenis = lenis\r\n\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold,\r\n }\r\n\r\n this.type = type\r\n this.elements = new Map()\r\n this.snaps = new Map()\r\n\r\n this.velocityThreshold = velocityThreshold\r\n this.onSnapStart = onSnapStart\r\n this.onSnapComplete = onSnapComplete\r\n\r\n this.viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize)\r\n\r\n this.lenis.on('scroll', this.onScroll)\r\n }\r\n\r\n // debug() {\r\n // const element = document.createElement('div')\r\n // element.style.cssText = `\r\n // position: fixed;\r\n // background: red;\r\n // border-bottom: 1px solid red;\r\n // left: 0;\r\n // right: 0;\r\n // top: 0;\r\n // z-index: 9999;\r\n // `\r\n // document.body.appendChild(element)\r\n // }\r\n\r\n destroy() {\r\n this.lenis.off('scroll', this.onScroll)\r\n window.removeEventListener('resize', this.onWindowResize)\r\n this.elements.forEach((slide) => slide.destroy())\r\n }\r\n\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n add(value) {\r\n const id = crypto.randomUUID()\r\n\r\n this.snaps.set(id, value)\r\n\r\n return () => this.remove(id)\r\n }\r\n\r\n remove(id) {\r\n this.snaps.delete(id)\r\n }\r\n\r\n addElement(element, options = {}) {\r\n const id = crypto.randomUUID()\r\n\r\n this.elements.set(id, new Slide(element, options))\r\n\r\n return () => this.removeElement(id)\r\n }\r\n\r\n removeElement(id) {\r\n this.elements.delete(id)\r\n }\r\n\r\n onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n onScroll = ({\r\n scroll,\r\n limit,\r\n lastVelocity,\r\n velocity,\r\n isScrolling,\r\n isTouching,\r\n userData,\r\n }) => {\r\n if (this.isStopped) return\r\n // console.log(scroll, velocity, type)\r\n\r\n // return\r\n const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity)\r\n const isTurningBack =\r\n Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0\r\n\r\n // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating })\r\n\r\n // console.log('onScroll')\r\n\r\n if (\r\n Math.abs(velocity) < this.velocityThreshold &&\r\n // !isTouching &&\r\n isDecelerating &&\r\n !isTurningBack &&\r\n userData?.initiator !== 'snap'\r\n ) {\r\n scroll = Math.ceil(scroll)\r\n\r\n let snaps = [0, ...this.snaps.values(), limit]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let snap\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n snap = rect.top\r\n } else if (align === 'center') {\r\n snap = rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n snap = rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (snap !== undefined) {\r\n snaps.push(Math.ceil(snap))\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b))\r\n\r\n let prevSnap = snaps.findLast((snap) => snap <= scroll)\r\n if (prevSnap === undefined) prevSnap = snaps[0]\r\n const distanceToPrevSnap = Math.abs(scroll - prevSnap)\r\n\r\n let nextSnap = snaps.find((snap) => snap >= scroll)\r\n if (nextSnap === undefined) nextSnap = snaps[snaps.length - 1]\r\n const distanceToNextSnap = Math.abs(scroll - nextSnap)\r\n\r\n const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap\r\n\r\n const distance = Math.abs(scroll - snap)\r\n\r\n if (\r\n this.type === 'mandatory' ||\r\n (this.type === 'proximity' && distance <= this.viewport.height)\r\n ) {\r\n // this.__isScrolling = true\r\n // this.onSnapStart?.(snap)\r\n\r\n // console.log('scroll to')\r\n\r\n this.lenis.scrollTo(snap, {\r\n lerp: this.options.lerp,\r\n easing: this.options.easing,\r\n duration: this.options.duration,\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.onSnapStart?.(snap)\r\n },\r\n onComplete: () => {\r\n this.onSnapComplete?.(snap)\r\n },\r\n })\r\n }\r\n\r\n // console.timeEnd('scroll')\r\n }\r\n }\r\n}\r\n"],"names":["removeParentSticky","element","getComputedStyle","position","style","setProperty","dataset","sticky","offsetParent","addParentSticky","removeProperty","offsetTop","accumulator","top","offsetLeft","left","scrollTop","window","scrollY","scrollLeft","scrollX","Slide","constructor","align","ignoreSticky","ignoreTransform","this","flat","rect","wrapperResizeObserver","ResizeObserver","onWrapperResize","observe","document","body","resizeObserver","onResize","destroy","disconnect","setRect","width","height","y","x","bottom","right","getBoundingClientRect","entry","borderBoxSize","inlineSize","blockSize","Snap","lenis","type","lerp","easing","duration","velocityThreshold","onSnapStart","onSnapComplete","onWindowResize","viewport","innerWidth","innerHeight","onScroll","scroll","limit","lastVelocity","velocity","isScrolling","isTouching","userData","isStopped","isDecelerating","Math","abs","isTurningBack","sign","initiator","ceil","snaps","values","elements","forEach","snap","undefined","push","sort","a","b","prevSnap","findLast","distanceToPrevSnap","nextSnap","find","length","distance","scrollTo","options","onStart","_a","call","onComplete","Map","addEventListener","on","off","removeEventListener","slide","start","stop","add","value","id","crypto","randomUUID","set","remove","delete","addElement","removeElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lenis-snap.mjs","sources":["../src/element.ts","../src/uid.ts","../src/index.ts"],"sourcesContent":["function removeParentSticky(element: HTMLElement) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element: HTMLElement) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction offsetTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport type SnapElementOptions = {\r\n align?: string[]\r\n ignoreSticky?: boolean\r\n ignoreTransform?: boolean\r\n}\r\n\r\ntype Rect = {\r\n top: number\r\n left: number\r\n width: number\r\n height: number\r\n x: number\r\n y: number\r\n bottom: number\r\n right: number\r\n element: HTMLElement\r\n}\r\n\r\nexport class SnapElement {\r\n element: HTMLElement\r\n options: SnapElementOptions\r\n align: string[]\r\n // @ts-ignore\r\n rect: Rect = {}\r\n wrapperResizeObserver: ResizeObserver\r\n resizeObserver: ResizeObserver\r\n\r\n constructor(\r\n element: HTMLElement,\r\n {\r\n align = ['start'],\r\n ignoreSticky = true,\r\n ignoreTransform = false,\r\n }: SnapElementOptions = {}\r\n ) {\r\n this.element = element\r\n\r\n this.options = { align, ignoreSticky, ignoreTransform }\r\n\r\n // this.ignoreSticky = ignoreSticky\r\n // this.ignoreTransform = ignoreTransform\r\n\r\n this.align = [align].flat()\r\n\r\n // TODO: assing rect immediately\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n this.onWrapperResize()\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n this.setRect({\r\n width: this.element.offsetWidth,\r\n height: this.element.offsetHeight,\r\n })\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({\r\n top,\r\n left,\r\n width,\r\n height,\r\n element,\r\n }: {\r\n top?: number\r\n left?: number\r\n width?: number\r\n height?: number\r\n element?: HTMLElement\r\n } = {}) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.options.ignoreSticky) removeParentSticky(this.element)\r\n if (this.options.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.options.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]: ResizeObserverEntry[]) => {\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","let index = 0\r\n\r\nexport type UID = number\r\n\r\nexport function uid(): UID {\r\n return index++\r\n}\r\n","import Lenis from 'lenis'\r\nimport { SnapElement, SnapElementOptions } from './element'\r\nimport { UID, uid } from './uid'\r\n\r\n// TODO:\r\n// - horizontal\r\n// - fix trackpad snapping too soon due to velocity (fuck Apple)\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - fix touch scroll, do not snap when not released\r\n// - arrow, spacebar\r\n\r\ntype Viewport = {\r\n width: number\r\n height: number\r\n}\r\n\r\nexport type SnapOptions = {\r\n type?: 'mandatory' | 'proximity'\r\n lerp?: number\r\n easing?: (t: number) => number\r\n duration?: number\r\n velocityThreshold?: number\r\n onSnapStart?: (t: number) => number\r\n onSnapComplete?: (t: number) => number\r\n}\r\n\r\nexport default class Snap {\r\n lenis: Lenis\r\n options: SnapOptions\r\n elements: Map<UID, SnapElement>\r\n snaps: Map<UID, number>\r\n viewport: Viewport\r\n isStopped: Boolean = false\r\n\r\n constructor(\r\n lenis: Lenis,\r\n {\r\n type = 'mandatory',\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold = 1,\r\n onSnapStart,\r\n onSnapComplete,\r\n }: SnapOptions = {}\r\n ) {\r\n this.lenis = lenis\r\n\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold,\r\n onSnapStart,\r\n onSnapComplete,\r\n }\r\n\r\n this.elements = new Map()\r\n this.snaps = new Map()\r\n\r\n this.viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize)\r\n\r\n this.lenis.on('scroll', this.onScroll)\r\n }\r\n\r\n // debug() {\r\n // const element = document.createElement('div')\r\n // element.style.cssText = `\r\n // position: fixed;\r\n // background: red;\r\n // border-bottom: 1px solid red;\r\n // left: 0;\r\n // right: 0;\r\n // top: 0;\r\n // z-index: 9999;\r\n // `\r\n // document.body.appendChild(element)\r\n // }\r\n\r\n destroy() {\r\n this.lenis.off('scroll', this.onScroll)\r\n window.removeEventListener('resize', this.onWindowResize)\r\n this.elements.forEach((element) => element.destroy())\r\n }\r\n\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n add(value: number) {\r\n const id = uid()\r\n\r\n this.snaps.set(id, value)\r\n\r\n return () => this.remove(id)\r\n }\r\n\r\n remove(id: UID) {\r\n this.snaps.delete(id)\r\n }\r\n\r\n addElement(element: HTMLElement, options = {} as SnapElementOptions) {\r\n const id = uid()\r\n\r\n this.elements.set(id, new SnapElement(element, options))\r\n\r\n return () => this.removeElement(id)\r\n }\r\n\r\n removeElement(id: UID) {\r\n this.elements.delete(id)\r\n }\r\n\r\n onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n onScroll = ({\r\n scroll,\r\n limit,\r\n lastVelocity,\r\n velocity,\r\n isScrolling,\r\n userData,\r\n isHorizontal,\r\n }) => {\r\n if (this.isStopped) return\r\n // console.log(scroll, velocity, type)\r\n\r\n // return\r\n const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity)\r\n const isTurningBack =\r\n Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0\r\n\r\n // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating })\r\n\r\n // console.log('onScroll')\r\n\r\n if (\r\n Math.abs(velocity) < this.options.velocityThreshold &&\r\n // !isTouching &&\r\n isDecelerating &&\r\n !isTurningBack &&\r\n userData?.initiator !== 'snap'\r\n ) {\r\n scroll = Math.ceil(scroll)\r\n\r\n let snaps = [0, ...this.snaps.values(), limit] as number[]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let snap: number | undefined\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n snap = rect.top\r\n } else if (align === 'center') {\r\n snap = isHorizontal\r\n ? rect.left + rect.width / 2 - this.viewport.width / 2\r\n : rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n snap = isHorizontal\r\n ? rect.left + rect.width - this.viewport.width\r\n : rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (snap !== undefined) {\r\n snaps.push(Math.ceil(snap))\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b))\r\n\r\n let prevSnap = snaps.findLast((snap) => snap <= scroll)\r\n if (prevSnap === undefined) prevSnap = snaps[0]\r\n const distanceToPrevSnap = Math.abs(scroll - prevSnap)\r\n\r\n let nextSnap = snaps.find((snap) => snap >= scroll)\r\n if (nextSnap === undefined) nextSnap = snaps[snaps.length - 1]\r\n const distanceToNextSnap = Math.abs(scroll - nextSnap)\r\n\r\n const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap\r\n\r\n const distance = Math.abs(scroll - snap)\r\n\r\n if (\r\n this.options.type === 'mandatory' ||\r\n (this.options.type === 'proximity' && distance <= this.viewport.height)\r\n ) {\r\n // this.__isScrolling = true\r\n // this.onSnapStart?.(snap)\r\n\r\n // console.log('scroll to')\r\n\r\n this.lenis.scrollTo(snap, {\r\n lerp: this.options.lerp,\r\n easing: this.options.easing,\r\n duration: this.options.duration,\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.options.onSnapStart?.(snap)\r\n },\r\n onComplete: () => {\r\n this.options.onSnapComplete?.(snap)\r\n },\r\n })\r\n }\r\n\r\n // console.timeEnd('scroll')\r\n }\r\n }\r\n}\r\n"],"names":["removeParentSticky","element","getComputedStyle","position","style","setProperty","dataset","sticky","offsetParent","addParentSticky","_a","removeProperty","offsetTop","accumulator","top","offsetLeft","left","scrollTop","window","scrollY","scrollLeft","scrollX","SnapElement","constructor","align","ignoreSticky","ignoreTransform","this","rect","onWrapperResize","options","getBoundingClientRect","setRect","onResize","entry","width","borderBoxSize","inlineSize","height","blockSize","flat","wrapperResizeObserver","ResizeObserver","observe","document","body","resizeObserver","offsetWidth","offsetHeight","destroy","disconnect","y","x","bottom","right","index","uid","Snap","lenis","type","lerp","easing","duration","velocityThreshold","onSnapStart","onSnapComplete","isStopped","onWindowResize","viewport","innerWidth","innerHeight","onScroll","scroll","limit","lastVelocity","velocity","isScrolling","userData","isHorizontal","isDecelerating","Math","abs","isTurningBack","sign","initiator","ceil","snaps","values","elements","forEach","snap","undefined","push","sort","a","b","prevSnap","findLast","distanceToPrevSnap","nextSnap","find","length","distance","scrollTo","onStart","_b","call","onComplete","Map","addEventListener","on","off","removeEventListener","start","stop","add","value","id","set","remove","delete","addElement","removeElement"],"mappings":"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"}
|
package/dist/lenis.d.ts
CHANGED
|
@@ -1,44 +1,41 @@
|
|
|
1
1
|
type EasingFunction = (t: number) => number;
|
|
2
2
|
type Orientation = 'vertical' | 'horizontal';
|
|
3
3
|
type GestureOrientation = 'vertical' | 'horizontal' | 'both';
|
|
4
|
-
type
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
4
|
+
type Scrolling = boolean | 'native' | 'smooth';
|
|
5
|
+
type LenisOptions = Partial<{
|
|
6
|
+
wrapper: Window | HTMLElement;
|
|
7
|
+
content: HTMLElement;
|
|
8
|
+
wheelEventsTarget: Window | HTMLElement;
|
|
9
|
+
eventsTarget: Window | HTMLElement;
|
|
10
|
+
smoothWheel: boolean;
|
|
11
|
+
syncTouch: boolean;
|
|
12
|
+
syncTouchLerp: number;
|
|
13
|
+
touchInertiaMultiplier: number;
|
|
14
|
+
duration: number;
|
|
15
|
+
easing: EasingFunction;
|
|
16
|
+
lerp: number;
|
|
17
|
+
infinite: boolean;
|
|
18
|
+
orientation: Orientation;
|
|
19
|
+
gestureOrientation: GestureOrientation;
|
|
20
|
+
touchMultiplier: number;
|
|
21
|
+
wheelMultiplier: number;
|
|
22
|
+
autoResize: boolean;
|
|
23
|
+
prevent: boolean | ((node: Element) => boolean);
|
|
24
|
+
__experimental__naiveDimensions: boolean;
|
|
25
|
+
}>;
|
|
25
26
|
declare class Lenis {
|
|
26
|
-
__isScrolling:
|
|
27
|
+
__isScrolling: Scrolling;
|
|
27
28
|
__isStopped: boolean;
|
|
28
29
|
__isLocked: boolean;
|
|
29
30
|
time: number;
|
|
30
31
|
userData: object;
|
|
31
32
|
lastVelocity: number;
|
|
32
33
|
velocity: number;
|
|
33
|
-
direction: 1 | -1 |
|
|
34
|
+
direction: 1 | -1 | 0;
|
|
34
35
|
options: LenisOptions;
|
|
35
36
|
targetScroll: number;
|
|
36
37
|
animatedScroll: number;
|
|
37
|
-
constructor({ wrapper, content, wheelEventsTarget,
|
|
38
|
-
eventsTarget, smoothWheel, syncTouch, syncTouchLerp, touchInertiaMultiplier, duration, // in seconds
|
|
39
|
-
easing, lerp, infinite, orientation, // vertical, horizontal
|
|
40
|
-
gestureOrientation, // vertical, horizontal, both
|
|
41
|
-
touchMultiplier, wheelMultiplier, autoResize, prevent, __experimental__naiveDimensions, }?: LenisOptions);
|
|
38
|
+
constructor({ wrapper, content, wheelEventsTarget, eventsTarget, smoothWheel, syncTouch, syncTouchLerp, touchInertiaMultiplier, duration, easing, lerp, infinite, orientation, gestureOrientation, touchMultiplier, wheelMultiplier, autoResize, prevent, __experimental__naiveDimensions, }?: LenisOptions);
|
|
42
39
|
destroy(): void;
|
|
43
40
|
on(event: string, callback: Function): any;
|
|
44
41
|
off(event: string, callback: Function): any;
|
|
@@ -51,9 +48,7 @@ declare class Lenis {
|
|
|
51
48
|
start(): void;
|
|
52
49
|
stop(): void;
|
|
53
50
|
raf(time: number): void;
|
|
54
|
-
scrollTo(target: number | string | HTMLElement, { offset, immediate, lock, duration, easing, lerp, onStart, onComplete, force,
|
|
55
|
-
programmatic, // called from outside of the class
|
|
56
|
-
userData, }?: {
|
|
51
|
+
scrollTo(target: number | string | HTMLElement, { offset, immediate, lock, duration, easing, lerp, onStart, onComplete, force, programmatic, userData, }?: {
|
|
57
52
|
offset?: number;
|
|
58
53
|
immediate?: boolean;
|
|
59
54
|
lock?: boolean;
|
|
@@ -66,13 +61,14 @@ declare class Lenis {
|
|
|
66
61
|
programmatic?: boolean;
|
|
67
62
|
userData?: object;
|
|
68
63
|
}): void;
|
|
69
|
-
|
|
64
|
+
private preventNextNativeScrollEvent;
|
|
65
|
+
get rootElement(): HTMLElement;
|
|
70
66
|
get limit(): any;
|
|
71
67
|
get isHorizontal(): boolean;
|
|
72
68
|
get actualScroll(): number;
|
|
73
69
|
get scroll(): number;
|
|
74
70
|
get progress(): number;
|
|
75
|
-
get isScrolling():
|
|
71
|
+
get isScrolling(): Scrolling;
|
|
76
72
|
private set isScrolling(value);
|
|
77
73
|
get isStopped(): boolean;
|
|
78
74
|
private set isStopped(value);
|