react-nice-scroll - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

dist/index.d.ts

@@ -8,1 +8,2 @@ export * from './ScrollContainer';
 export * from './state';
+export * from './animations';

dist/react-nice-scroll.cjs.development.js

@@ -617,3 +617,5 @@ 'use strict';
 exports.SequenceSection = SequenceSection;
+exports.gellyAnimation = gellyAnimation;
+exports.parallaxAnimation = parallaxAnimation;
 exports.useGlobalState = useGlobalState;
 //# sourceMappingURL=react-nice-scroll.cjs.development.js.map

dist/react-nice-scroll.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=e(require("smooth-scrollbar")),o=require("gsap/dist/ScrollTrigger"),i=require("react-hooks-global-state"),a=require("gsap");function l(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,(Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var s=function(e){function t(){return e.apply(this,arguments)||this}return l(t,e),t.prototype.transformDelta=function(e){return this.options.allow?e:{x:0,y:0}},t}(r.ScrollbarPlugin);s.defaultOptions={allow:!0},s.pluginName="allowScroll";var u=function(e){function t(){return e.apply(this,arguments)||this}l(t,e);var n=t.prototype;return n.transformDelta=function(e,t){return this.scrollbar.contentEl.style.willChange="transform",e},n.onRender=function(e){0===e.x&&0===e.y&&(this.scrollbar.contentEl.style.willChange="")},t}(r.ScrollbarPlugin);u.pluginName="willChange";var d=i.createGlobalState({container:void 0,smoothScrollBar:void 0,allowScroll:!0}).useGlobalState,f=["children","damping","thumbMinSize","renderByPixels","alwaysShowTracks","continuousScrolling","delegateTo","activeSmoothScrollOnTouchDevice","disableSmoothScroll"],g=["children","top","left","right"],m=["children","axis","trigger","intensity","min","max","duration","ease","start","end"];a.gsap.registerPlugin(o.ScrollTrigger);var v=["children","toRight","start","addAnimation"],p=["src","alt","triggerElement","start","end","axis","fromPercent","toPercent","containerHeight","imageScale","imageObjectPosition"],h=function(e,t,n,r){void 0===n&&(n=.5),void 0===r&&(r=.5);var o,i,a=e.canvas.width,l=e.canvas.height,c=t.width/t.height;c>a/l?(o=l,i=l*c):(i=a,o=a/c),e.drawImage(t,(a-i)*n,(l-o)*r,i,o)},y=["imagesPath","imagesType","imagesCount","start","end"];exports.FixedElement=function(e){var r=e.children,o=e.top,i=void 0===o?0:o,a=e.left,l=e.right,s=c(e,g),u=t.useRef(null),f=d("smoothScrollBar")[0];return t.useLayoutEffect((function(){return f&&f.addListener((function(e){var t=e.offset;u.current&&(u.current.style.top=i+t.y+"px",void 0!==l&&(u.current.style.right=l+t.x+"px"),void 0!==a&&(u.current.style.left=a+t.x+"px"))})),function(){}}),[a,l,f,i]),n.createElement("div",Object.assign({className:"ns-fixed-element",ref:u,style:{top:i,left:a,right:l}},s),r)},exports.GellyElement=function(e){var r=e.children,i=e.axis,l=void 0===i?"skewY":i,s=e.trigger,u=e.intensity,f=void 0===u?-400:u,g=e.min,v=void 0===g?-40:g,p=e.max,h=void 0===p?40:p,y=e.duration,w=void 0===y?.3:y,b=e.ease,x=void 0===b?"expo.out":b,S=e.start,E=void 0===S?"top bottom":S,T=e.end,P=void 0===T?"bottom top":T,k=c(e,m),R=t.useRef(null),O=d("container")[0];return t.useLayoutEffect((function(){var e,t=o.ScrollTrigger.create({trigger:s||R.current,scroller:O,start:E,end:P,onUpdate:function(t){R.current&&(e=function(e,t,n,r,o,i,l,c){var s={skew:0},u=a.gsap.quickSetter(e,n,"deg"),d=a.gsap.utils.clamp(o,i)(t/r);return Math.abs(d)>Math.abs(s.skew)&&(s.skew=d),a.gsap.to(s,{skew:0,duration:l,ease:c,overwrite:!0,onUpdate:function(){return u(s.skew)},immediateRender:!1})}(R.current,t.getVelocity(),l,f,v,h,w,x))}});return function(){var n;null==(n=e)||n.kill(),null==t||t.kill()}}),[l,w,x,P,f,h,v,O,E,s]),n.createElement("div",Object.assign({className:"ns-gelly-element",ref:R},k),r)},exports.HorizontalSection=function(e){var r=e.children,o=e.toRight,i=void 0===o||o,l=e.start,s=void 0===l?"top top":l,u=e.addAnimation,f=c(e,v),g=t.useRef(null),m=t.useRef(null),p=t.useRef(null),h=d("container")[0];return t.useLayoutEffect((function(){var e;if(p.current){var t=p.current.scrollWidth,n=function(){return-(t-window.innerWidth)};e=a.gsap.fromTo(p.current,{x:function(){return i?0:n()}},{x:function(){return i?n():0},ease:"none",scrollTrigger:{trigger:g.current,scroller:h,pinType:h===document.body?"fixed":"transform",start:s,end:function(){return"+="+t},onEnter:function(){g.current&&(g.current.style.willChange="transform")},onEnterBack:function(){g.current&&(g.current.style.willChange="transform")},onLeave:function(){g.current&&(g.current.style.willChange="")},onLeaveBack:function(){g.current&&(g.current.style.willChange="")},pin:!0,invalidateOnRefresh:!0,anticipatePin:1,scrub:!0}}),u&&e&&u(e)}return function(){var t;null==(t=e)||t.kill()}}),[u,i,h,s]),n.createElement("section",Object.assign({className:"ns-horizontal-section",ref:g},f),n.createElement("div",{className:"ns-horizontal-section__pin-wrap",ref:m},n.createElement("div",{className:"ns-horizontal-section__animation-wrap",ref:p},r)))},exports.ParallaxImage=function(e){var r=e.src,i=e.alt,l=e.triggerElement,s=e.start,u=void 0===s?"top bottom":s,f=e.end,g=void 0===f?"bottom top":f,m=e.axis,v=void 0===m?"y":m,h=e.fromPercent,y=void 0===h?-40:h,w=e.toPercent,b=void 0===w?40:w,x=e.containerHeight,S=void 0===x?"100vh":x,E=e.imageScale,T=void 0===E?1.2:E,P=e.imageObjectPosition,k=void 0===P?"center":P,R=c(e,p),O=t.useRef(null),L=t.useRef(null),j=d("container")[0];return t.useLayoutEffect((function(){var e,t=O.current||l;return null!==L.current&&t&&j&&(e=function(e,t,n,r,o,i,l,c){return a.gsap.timeline({scrollTrigger:{trigger:t,scroller:n,scrub:!0,start:r,end:o,pin:!1}}).from(e,{yPercent:"y"===i?l:void 0,xPercent:"x"===i?l:void 0,ease:"none",immediateRender:n===document.body}).to(e,{yPercent:"y"===i?c:void 0,xPercent:"x"===i?c:void 0,ease:"none"})}(L.current,t,j,u,g,v,y,b)),function(){var t;null==(t=e)||t.kill()}}),[v,g,y,j,u,b,l,S,T,k]),n.createElement("figure",Object.assign({className:"ns-parallax-image",ref:O,style:{height:""+S}},R),n.createElement("img",{ref:L,src:r,alt:i,className:"ns-parallax-image__inner",style:{transform:"scale("+T+")",objectPosition:""+k},loading:"lazy",onLoad:function(){return o.ScrollTrigger.refresh()}}))},exports.ScrollContainer=function(e){var i=e.children,a=e.damping,l=void 0===a?.075:a,g=e.thumbMinSize,m=void 0===g?20:g,v=e.renderByPixels,p=void 0!==v&&v,h=e.alwaysShowTracks,y=void 0!==h&&h,w=e.continuousScrolling,b=void 0===w||w,x=e.delegateTo,S=e.activeSmoothScrollOnTouchDevice,E=void 0!==S&&S,T=e.disableSmoothScroll,P=void 0!==T&&T,k=c(e,f),R=t.useRef(null),O=d("container")[1],L=d("smoothScrollBar")[1];return t.useLayoutEffect((function(){if(!(function(){if("undefined"!=typeof window)return Boolean("ontouchstart"in window||window.navigator.maxTouchPoints>0||window.navigator.msMaxTouchPoints>0||window.DocumentTouch&&document instanceof DocumentTouch)}()&&!E||P)){r.use(s,u);var e=R.current;if(e){var t=r.init(e,{damping:l,thumbMinSize:m,renderByPixels:p,alwaysShowTracks:y,continuousScrolling:b,delegateTo:x});t&&L(t),o.ScrollTrigger.scrollerProxy(e,{scrollTop:function(e){return arguments.length&&e&&(t.scrollTop=e),t.scrollTop}}),t.addListener(o.ScrollTrigger.update),R.current&&O(R.current)}return function(){null==r||r.destroyAll()}}R.current&&(R.current.style.overflow="auto",R.current.style.height="auto",O(document.body))}),[y,b,l,p,m,O,E,P,x,L]),n.createElement("div",Object.assign({className:"ns-container"},k,{ref:R}),i)},exports.SequenceSection=function(e){var r=e.imagesPath,o=e.imagesType,i=e.imagesCount,l=e.start,s=void 0===l?"top top":l,u=e.end,f=void 0===u?"200%":u,g=c(e,y),m=t.useRef(null),v=t.useRef(null),p=d("container")[0];return t.useLayoutEffect((function(){for(var e=[],t=0;t<i;t++)e.push(r+"/"+(t+1)+"."+o);var n,l=function(e){return Promise.all(e.map((function(e){return function(e){return new Promise((function(t,n){var r=new Image,o=new XMLHttpRequest;o.open("GET",e,!0),o.responseType="blob",o.onload=function(){r.src=URL.createObjectURL(o.response),r.onload=function(){return t(r)}},o.onerror=function(){return n()},o.send()}))}(e)})))}(e);v.current&&(n=v.current.getContext("2d"));var c=a.gsap.timeline({scrollTrigger:{trigger:m.current,scroller:p,scrub:!0,start:s,end:f,pin:!0,pinType:p===document.body?"fixed":"transform",onEnter:function(){m.current&&(m.current.style.willChange="transform")},onEnterBack:function(){m.current&&(m.current.style.willChange="transform")},onLeave:function(){m.current&&(m.current.style.willChange="")},onLeaveBack:function(){m.current&&(m.current.style.willChange="")}}});return window.addEventListener("resize",function e(){return n.canvas.width=document.documentElement.clientWidth,n.canvas.height=document.documentElement.clientHeight,e}()),l.then((function(e){var t={i:0};c.to(t,{i:e.length-1,roundProps:"i",ease:"none",immediateRender:!0,onUpdate:function(){n&&h(n,e[t.i])}},0),window.addEventListener("resize",(function(){n&&h(n,e[t.i])}))})),function(){null==c||c.kill()}}),[f,i,r,o,p,s]),n.createElement("section",Object.assign({className:"ns-sequence-section",ref:m},g),n.createElement("canvas",{className:"ns-sequence-section__canvas",ref:v}))},exports.useGlobalState=d;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=e(require("smooth-scrollbar")),o=require("gsap/dist/ScrollTrigger"),i=require("react-hooks-global-state"),a=require("gsap");function l(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,(Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var s=function(e){function t(){return e.apply(this,arguments)||this}return l(t,e),t.prototype.transformDelta=function(e){return this.options.allow?e:{x:0,y:0}},t}(r.ScrollbarPlugin);s.defaultOptions={allow:!0},s.pluginName="allowScroll";var u=function(e){function t(){return e.apply(this,arguments)||this}l(t,e);var n=t.prototype;return n.transformDelta=function(e,t){return this.scrollbar.contentEl.style.willChange="transform",e},n.onRender=function(e){0===e.x&&0===e.y&&(this.scrollbar.contentEl.style.willChange="")},t}(r.ScrollbarPlugin);u.pluginName="willChange";var d=i.createGlobalState({container:void 0,smoothScrollBar:void 0,allowScroll:!0}).useGlobalState,f=["children","damping","thumbMinSize","renderByPixels","alwaysShowTracks","continuousScrolling","delegateTo","activeSmoothScrollOnTouchDevice","disableSmoothScroll"],g=["children","top","left","right"],m=function(e,t,n,r,o,i,l,c){var s={skew:0},u=a.gsap.quickSetter(e,n,"deg"),d=a.gsap.utils.clamp(o,i)(t/r);return Math.abs(d)>Math.abs(s.skew)&&(s.skew=d),a.gsap.to(s,{skew:0,duration:l,ease:c,overwrite:!0,onUpdate:function(){return u(s.skew)},immediateRender:!1})},v=function(e,t,n,r,o,i,l,c){return a.gsap.timeline({scrollTrigger:{trigger:t,scroller:n,scrub:!0,start:r,end:o,pin:!1}}).from(e,{yPercent:"y"===i?l:void 0,xPercent:"x"===i?l:void 0,ease:"none",immediateRender:n===document.body}).to(e,{yPercent:"y"===i?c:void 0,xPercent:"x"===i?c:void 0,ease:"none"})},p=["children","axis","trigger","intensity","min","max","duration","ease","start","end"];a.gsap.registerPlugin(o.ScrollTrigger);var h=["children","toRight","start","addAnimation"],y=["src","alt","triggerElement","start","end","axis","fromPercent","toPercent","containerHeight","imageScale","imageObjectPosition"],w=function(e,t,n,r){void 0===n&&(n=.5),void 0===r&&(r=.5);var o,i,a=e.canvas.width,l=e.canvas.height,c=t.width/t.height;c>a/l?(o=l,i=l*c):(i=a,o=a/c),e.drawImage(t,(a-i)*n,(l-o)*r,i,o)},x=["imagesPath","imagesType","imagesCount","start","end"];exports.FixedElement=function(e){var r=e.children,o=e.top,i=void 0===o?0:o,a=e.left,l=e.right,s=c(e,g),u=t.useRef(null),f=d("smoothScrollBar")[0];return t.useLayoutEffect((function(){return f&&f.addListener((function(e){var t=e.offset;u.current&&(u.current.style.top=i+t.y+"px",void 0!==l&&(u.current.style.right=l+t.x+"px"),void 0!==a&&(u.current.style.left=a+t.x+"px"))})),function(){}}),[a,l,f,i]),n.createElement("div",Object.assign({className:"ns-fixed-element",ref:u,style:{top:i,left:a,right:l}},s),r)},exports.GellyElement=function(e){var r=e.children,i=e.axis,a=void 0===i?"skewY":i,l=e.trigger,s=e.intensity,u=void 0===s?-400:s,f=e.min,g=void 0===f?-40:f,v=e.max,h=void 0===v?40:v,y=e.duration,w=void 0===y?.3:y,x=e.ease,b=void 0===x?"expo.out":x,S=e.start,E=void 0===S?"top bottom":S,T=e.end,P=void 0===T?"bottom top":T,k=c(e,p),R=t.useRef(null),O=d("container")[0];return t.useLayoutEffect((function(){var e,t=o.ScrollTrigger.create({trigger:l||R.current,scroller:O,start:E,end:P,onUpdate:function(t){R.current&&(e=m(R.current,t.getVelocity(),a,u,g,h,w,b))}});return function(){var n;null==(n=e)||n.kill(),null==t||t.kill()}}),[a,w,b,P,u,h,g,O,E,l]),n.createElement("div",Object.assign({className:"ns-gelly-element",ref:R},k),r)},exports.HorizontalSection=function(e){var r=e.children,o=e.toRight,i=void 0===o||o,l=e.start,s=void 0===l?"top top":l,u=e.addAnimation,f=c(e,h),g=t.useRef(null),m=t.useRef(null),v=t.useRef(null),p=d("container")[0];return t.useLayoutEffect((function(){var e;if(v.current){var t=v.current.scrollWidth,n=function(){return-(t-window.innerWidth)};e=a.gsap.fromTo(v.current,{x:function(){return i?0:n()}},{x:function(){return i?n():0},ease:"none",scrollTrigger:{trigger:g.current,scroller:p,pinType:p===document.body?"fixed":"transform",start:s,end:function(){return"+="+t},onEnter:function(){g.current&&(g.current.style.willChange="transform")},onEnterBack:function(){g.current&&(g.current.style.willChange="transform")},onLeave:function(){g.current&&(g.current.style.willChange="")},onLeaveBack:function(){g.current&&(g.current.style.willChange="")},pin:!0,invalidateOnRefresh:!0,anticipatePin:1,scrub:!0}}),u&&e&&u(e)}return function(){var t;null==(t=e)||t.kill()}}),[u,i,p,s]),n.createElement("section",Object.assign({className:"ns-horizontal-section",ref:g},f),n.createElement("div",{className:"ns-horizontal-section__pin-wrap",ref:m},n.createElement("div",{className:"ns-horizontal-section__animation-wrap",ref:v},r)))},exports.ParallaxImage=function(e){var r=e.src,i=e.alt,a=e.triggerElement,l=e.start,s=void 0===l?"top bottom":l,u=e.end,f=void 0===u?"bottom top":u,g=e.axis,m=void 0===g?"y":g,p=e.fromPercent,h=void 0===p?-40:p,w=e.toPercent,x=void 0===w?40:w,b=e.containerHeight,S=void 0===b?"100vh":b,E=e.imageScale,T=void 0===E?1.2:E,P=e.imageObjectPosition,k=void 0===P?"center":P,R=c(e,y),O=t.useRef(null),L=t.useRef(null),j=d("container")[0];return t.useLayoutEffect((function(){var e,t=O.current||a;return null!==L.current&&t&&j&&(e=v(L.current,t,j,s,f,m,h,x)),function(){var t;null==(t=e)||t.kill()}}),[m,f,h,j,s,x,a,S,T,k]),n.createElement("figure",Object.assign({className:"ns-parallax-image",ref:O,style:{height:""+S}},R),n.createElement("img",{ref:L,src:r,alt:i,className:"ns-parallax-image__inner",style:{transform:"scale("+T+")",objectPosition:""+k},loading:"lazy",onLoad:function(){return o.ScrollTrigger.refresh()}}))},exports.ScrollContainer=function(e){var i=e.children,a=e.damping,l=void 0===a?.075:a,g=e.thumbMinSize,m=void 0===g?20:g,v=e.renderByPixels,p=void 0!==v&&v,h=e.alwaysShowTracks,y=void 0!==h&&h,w=e.continuousScrolling,x=void 0===w||w,b=e.delegateTo,S=e.activeSmoothScrollOnTouchDevice,E=void 0!==S&&S,T=e.disableSmoothScroll,P=void 0!==T&&T,k=c(e,f),R=t.useRef(null),O=d("container")[1],L=d("smoothScrollBar")[1];return t.useLayoutEffect((function(){if(!(function(){if("undefined"!=typeof window)return Boolean("ontouchstart"in window||window.navigator.maxTouchPoints>0||window.navigator.msMaxTouchPoints>0||window.DocumentTouch&&document instanceof DocumentTouch)}()&&!E||P)){r.use(s,u);var e=R.current;if(e){var t=r.init(e,{damping:l,thumbMinSize:m,renderByPixels:p,alwaysShowTracks:y,continuousScrolling:x,delegateTo:b});t&&L(t),o.ScrollTrigger.scrollerProxy(e,{scrollTop:function(e){return arguments.length&&e&&(t.scrollTop=e),t.scrollTop}}),t.addListener(o.ScrollTrigger.update),R.current&&O(R.current)}return function(){null==r||r.destroyAll()}}R.current&&(R.current.style.overflow="auto",R.current.style.height="auto",O(document.body))}),[y,x,l,p,m,O,E,P,b,L]),n.createElement("div",Object.assign({className:"ns-container"},k,{ref:R}),i)},exports.SequenceSection=function(e){var r=e.imagesPath,o=e.imagesType,i=e.imagesCount,l=e.start,s=void 0===l?"top top":l,u=e.end,f=void 0===u?"200%":u,g=c(e,x),m=t.useRef(null),v=t.useRef(null),p=d("container")[0];return t.useLayoutEffect((function(){for(var e=[],t=0;t<i;t++)e.push(r+"/"+(t+1)+"."+o);var n,l=function(e){return Promise.all(e.map((function(e){return function(e){return new Promise((function(t,n){var r=new Image,o=new XMLHttpRequest;o.open("GET",e,!0),o.responseType="blob",o.onload=function(){r.src=URL.createObjectURL(o.response),r.onload=function(){return t(r)}},o.onerror=function(){return n()},o.send()}))}(e)})))}(e);v.current&&(n=v.current.getContext("2d"));var c=a.gsap.timeline({scrollTrigger:{trigger:m.current,scroller:p,scrub:!0,start:s,end:f,pin:!0,pinType:p===document.body?"fixed":"transform",onEnter:function(){m.current&&(m.current.style.willChange="transform")},onEnterBack:function(){m.current&&(m.current.style.willChange="transform")},onLeave:function(){m.current&&(m.current.style.willChange="")},onLeaveBack:function(){m.current&&(m.current.style.willChange="")}}});return window.addEventListener("resize",function e(){return n.canvas.width=document.documentElement.clientWidth,n.canvas.height=document.documentElement.clientHeight,e}()),l.then((function(e){var t={i:0};c.to(t,{i:e.length-1,roundProps:"i",ease:"none",immediateRender:!0,onUpdate:function(){n&&w(n,e[t.i])}},0),window.addEventListener("resize",(function(){n&&w(n,e[t.i])}))})),function(){null==c||c.kill()}}),[f,i,r,o,p,s]),n.createElement("section",Object.assign({className:"ns-sequence-section",ref:m},g),n.createElement("canvas",{className:"ns-sequence-section__canvas",ref:v}))},exports.gellyAnimation=m,exports.parallaxAnimation=v,exports.useGlobalState=d;
 //# sourceMappingURL=react-nice-scroll.cjs.production.min.js.map

dist/react-nice-scroll.esm.js

@@ -604,3 +604,3 @@ import React, { useRef, useLayoutEffect } from 'react';
 
-export { FixedElement, GellyElement, HorizontalSection, ParallaxImage, ScrollContainer, SequenceSection, useGlobalState };
+export { FixedElement, GellyElement, HorizontalSection, ParallaxImage, ScrollContainer, SequenceSection, gellyAnimation, parallaxAnimation, useGlobalState };
 //# sourceMappingURL=react-nice-scroll.esm.js.map

package.json

 {
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "MIT",
@@ -4,0 +4,0 @@ "name": "react-nice-scroll",

No alert changes

Improved metrics

Total package byte prevSize

184502

increased by0.12%

Lines of code

1906

increased by0.21%

No dependency changes