From bf4a5d8f05ec3b4bfe560ac14d459f50f24d02d8 Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Tue, 12 Dec 2023 22:08:26 +0100 Subject: [PATCH] feat (ScrollObserver) : add synchronise method --- build/OneLoop.js | 9 +++++++-- build/OneLoop.min.js | 4 ++-- package.json | 2 +- src/class/ScrollObserver.js | 7 ++++++- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/build/OneLoop.js b/build/OneLoop.js index 22ec796..f5f49b1 100644 --- a/build/OneLoop.js +++ b/build/OneLoop.js @@ -3,7 +3,7 @@ * Copyright 2022 OneLoop.js * Author: Nicolas Langle * Repository: https://github.com/n-langle/OneLoop.js -* Version: 5.0.4 +* Version: 5.1.0 * SPDX-License-Identifier: MIT * * Credit for easing functions goes to : https://github.com/ai/easings.net/blob/master/src/easings/easingsFunctions.ts @@ -746,7 +746,7 @@ class ScrollObserver extends MainLoopEntry { this._needsUpdate = false; // no need to control the index - // the flag needsUpdate do the job + // the flag needsUpdate does the job instances$1.splice(instances$1.indexOf(this), 1); if (instances$1.length === 0) { @@ -845,6 +845,11 @@ class ScrollObserver extends MainLoopEntry { return this } + synchronise() { + this._lastScroll = getWindowScroll(); + return this + } + // ---- // statics // ---- diff --git a/build/OneLoop.min.js b/build/OneLoop.min.js index 34a43fd..8276de2 100644 --- a/build/OneLoop.min.js +++ b/build/OneLoop.min.js @@ -3,10 +3,10 @@ * Copyright 2022 OneLoop.js * Author: Nicolas Langle * Repository: https://github.com/n-langle/OneLoop.js -* Version: 5.0.4 +* Version: 5.1.0 * SPDX-License-Identifier: MIT * * Credit for easing functions goes to : https://github.com/ai/easings.net/blob/master/src/easings/easingsFunctions.ts * Credit for Emoji regexp goes to : https://medium.com/reactnative/emojis-in-javascript-f693d0eb79fb */ -const d=window,U=document.documentElement,s=Math,a=s.pow,u=s.sqrt,l=s.sin,o=s.cos,c=s.PI,_=s.max,p=s.min,q=s.abs,Q=s.round;var V=function(){const s=1.70158,e=1.525*s,i=1+s,r=2*c/3,h=2*c/4.5,n=t=>{var s=7.5625,e=2.75;return t<1/e?s*t*t:t<2/e?s*(t-=1.5/e)*t+.75:t<2.5/e?s*(t-=2.25/e)*t+.9375:s*(t-=2.625/e)*t+.984375};return{linear:t=>t,easeInQuad:t=>t*t,easeOutQuad:t=>1-(1-t)*(1-t),easeInOutQuadx:t=>t<.5?2*t*t:1-a(-2*t+2,2)/2,easeInCubic:t=>t*t*t,easeOutCubic:t=>1-a(1-t,3),easeInOutCubic:t=>t<.5?4*t*t*t:1-a(-2*t+2,3)/2,easeInQuart:t=>t*t*t*t,easeOutQuart:t=>1-a(1-t,4),easeInOutQuart:t=>t<.5?8*t*t*t*t:1-a(-2*t+2,4)/2,easeInQuint:t=>t*t*t*t*t,easeOutQuint:t=>1-a(1-t,5),easeInOutQuint:t=>t<.5?16*t*t*t*t*t:1-a(-2*t+2,5)/2,easeInSine:t=>1-o(t*c/2),easeOutSine:t=>l(t*c/2),easeInOutSine:t=>-(o(c*t)-1)/2,easeInExpo:t=>0===t?0:a(2,10*t-10),easeOutExpo:t=>1===t?1:1-a(2,-10*t),easeInOutExpo:t=>0===t?0:1===t?1:t<.5?a(2,20*t-10)/2:(2-a(2,-20*t+10))/2,easeInCirc:t=>1-u(1-a(t,2)),easeOutCirc:t=>u(1-a(t-1,2)),easeInOutCirc:t=>t<.5?(1-u(1-a(2*t,2)))/2:(u(1-a(-2*t+2,2))+1)/2,easeInBack:t=>i*t*t*t-s*t*t,easeOutBack:t=>1+i*a(t-1,3)+s*a(t-1,2),easeInOutBack:t=>t<.5?a(2*t,2)*(2*(1+e)*t-e)/2:(a(2*t-2,2)*((1+e)*(2*t-2)+e)+2)/2,easeInElastic:t=>0===t?0:1===t?1:-a(2,10*t-10)*l((10*t-10.75)*r),easeOutElastic:t=>0===t?0:1===t?1:a(2,-10*t)*l((10*t-.75)*r)+1,easeInOutElastic:t=>0===t?0:1===t?1:t<.5?-(a(2,20*t-10)*l((20*t-11.125)*h))/2:a(2,-20*t+10)*l((20*t-11.125)*h)/2+1,easeInBounce:t=>1-n(1-t),easeOutBounce:n,easeInOutBounce:t=>t<.5?(1-n(1-2*t))/2:(1+n(2*t-1))/2}}(),e=()=>performance.now();const i=[];let r=null,t=null;function z(s){var e=(s-t)/16.66;for(let t=0;t{};class y{constructor(t){n(this,y.defaults,t)}start(){return h.add(this),this.onStart.call(this,e(),0),this}stop(){return h.remove(this),this.onStop.call(this,e(),0),this}update(t,s){return this.onUpdate.call(this,t,s),this}complete(t,s){return this.onComplete.call(this,t,s),this}needsUpdate(){return!0}static defaults={onStart:f,onUpdate:f,onStop:f,onComplete:f}}class B extends y{constructor(t){super(n({},B.defaults,t)),this._a=0,this._b=1,this._c=0,this._d=this.reverse?1:0,this._e=0,this._f=null,this.autoStart&&this.start()}reset(){return this._f=null,this._b=1,this._c=0,this._d=this.reverse?1:0,h.remove(this),this.onUpdate(0,0,0),this}pause(){return this._f=e(),h.remove(this),this}start(t){return 0===(t=0!==t?t||this.delay:t)?(this._f?(this._e+=e()-this._f,this._f=null):(this.reverse&&(this._b=D[this._d](this._c),this._d=(this._d+1)%2),this._e=0,this._a=e(),this.onStart(this._a,0,1-this._b)),h.add(this)):setTimeout(this.start.bind(this,0),t),this}update(t,s){var e=V[this.easing]((t-(this._a+this._e))/(this.duration*this._b))*this._b+1-this._b,e=D[this._d](e);return this._c=e,this.onUpdate(t,s,e),this}complete(t,s){var e=(this._d+1)%2;return this._f=null,this.onUpdate(t,s,e),this.onComplete(t,s,e),0t,t=>1-t];var v=(t,s)=>"string"==typeof t?(s||document).querySelectorAll(t):0<=t.length?t:[t];const b=[];class x extends y{constructor(t,s,e){super();var i={};i[s+"start"]=[],i[s]=[],i[s+"end"]=[],this._g=i,this._h=!1,this._i=null,this._j=t,this._k=s,this._l=null,this._m=e||"",this._n=()=>{this._h=!1},this._o=t=>{this._l=t,this._h||(this._h=!0,this.start(),g(this._g[this._k+"start"],t)),clearTimeout(this._i),this._i=setTimeout(this._n,128)},this._j.addEventListener(this._k,this._o,{passive:!0})}destroy(){var t=b.indexOf(this);-1new m(U.scrollWidth,U.scrollHeight),O=()=>new m(d.pageXOffset,d.pageYOffset);class F{constructor(t,s,e){n(this,F.defaults,s),this.element=t,this._p=!1,this._q=!1,this.children=this.children?v(this.children,this.element):[],this.refresh(e),this._p=!0}refresh(t){var s=this.element.getBoundingClientRect(),e=s.height,i=s.width,r=s.right,h=s.bottom,n=d.innerHeight,a=d.innerWidth,u=O(),l=u.x,u=u.y,o=T();return this.distanceRTW=new m(a+i,n+e),this.startRTW=new m(r-this.distanceRTW.x+l,h-this.distanceRTW.y+u),this.startRTE=new m(_(s.left+l-a,0),_(s.top+u-n,0)),this.distanceRTE=new m(p(r+l-this.startRTE.x,o.x-r-l+i,o.x-a),p(h+u-this.startRTE.y,o.y-h-u+e,o.y-n)),this.control(t),this}control(t){var s=t.scroll,e=s.clone().subtract(this.startRTW).divide(this.distanceRTW),s=s.clone().subtract(this.startRTE).divide(this.distanceRTE);return 0<=e.x&&e.x<=1&&0<=e.y&&e.y<=1?(this._q||(this._q=!0,this.onVisibilityStart.call(this,t,w(e),w(s)),this.onVisible.call(this,t,w(e),w(s))),this.onVisible.call(this,t,e,s)):!this._q&&this._p||(this._q=!1,this.onVisible.call(this,t,w(e),w(s)),this.onVisibilityEnd.call(this,t,w(e),w(s))),this.onAlways.call(this,t,e,s),this}static defaults={children:"",onVisible:f,onVisibilityStart:f,onVisibilityEnd:f,onAlways:f}}function w(t){return new m(p(_(0,Q(t.x)),1),p(_(0,Q(t.y)),1))}const I=[];let S=null,R=null,E=null;class L extends y{constructor(t){super(n({},L.defaults,t)),this._r=[],this._s=[],this._t=()=>this.start(),this._u=()=>this.refresh(),this._v=O(),this._h=!0,this._w=T(),R=R||new x(d,"resize"),E=E||new x(d,"scroll"),R.add("resize",this._u),E.add("scrollstart",this._t),I.push(this),L.startAutoRefresh()}destroy(){this._h&&(this._h=!1,I.splice(I.indexOf(this),1),0===I.length?(L.stopAutoRefresh(),R.destroy(),E.destroy(),R=E=null):(R.remove("resize",this._u),E.remove("scrollstart",this._t)))}observe(t,s){var e=v(t),i=this.getScrollInfos();for(let t=0;t{var t=T();if(s.x!==t.x||s.y!==t.y){for(let t=0;t)/g,N=/(\s)/;let H=null;class M{constructor(t,s){n(this,M.defaults,s),this._x=t.innerHTML,this._y=t,this._u=this.split.bind(this),H=H||new x(d,"resize"),this.autoSplit&&this.split(),W.push(this)}destroy(){var t=W.indexOf(this);-1t?this.lineWrapper(t)+s:"";let s="",e="",i=r[0].offsetTop;H.add("resize",this._u);for(let t=0;tN.test(t)?t:this.charWrapper(t),this.preserve))}return this}static defaults={autoSplit:!0,byLine:!1,byWord:!1,byChar:!1,preserve:"st-char",lineWrapper:k("st-line"),wordWrapper:k("st-word"),charWrapper:k("st-char")}}function k(s){return t=>''+t+""}function C(t,s,e){var i=t.childNodes;let r="";for(let t=0;tt.replace(j,s),t=>A(t,P(t,s)))}function X(t,e,i,s){return C(t,t=>{var s=t.trim();return""!==s?(""===e?t:s).split(e).map(i).join(e):t},t=>s&&t.classList.contains(s)?t.outerHTML:A(t,X(t,e,i,s)))}function Y(t,s){return C(t,t=>t,t=>t.classList.contains(s)?t.innerHTML:A(t,Y(t,s)))}function A(t,s){return t.outerHTML.replace(">"+t.innerHTML+"<",">"+s+"<")}function Z(t,s){t.innerHTML=function s(t){return C(t,t=>t.replace("<","[<]"),t=>A(t,s(t)))}(t),t.innerHTML=X(t," ",s).replace("[<]","<")}M.destroy=function(){for(;W[0];)W[0].destroy()};export{y as MainLoopEntry,L as ScrollObserver,M as SplittedText,x as ThrottledEvent,B as Tween,m as Vector2,V as easings}; +const d=window,U=document.documentElement,s=Math,u=s.pow,a=s.sqrt,l=s.sin,o=s.cos,c=s.PI,_=s.max,p=s.min,q=s.abs,Q=s.round;var V=function(){const s=1.70158,e=1.525*s,i=1+s,r=2*c/3,h=2*c/4.5,n=t=>{var s=7.5625,e=2.75;return t<1/e?s*t*t:t<2/e?s*(t-=1.5/e)*t+.75:t<2.5/e?s*(t-=2.25/e)*t+.9375:s*(t-=2.625/e)*t+.984375};return{linear:t=>t,easeInQuad:t=>t*t,easeOutQuad:t=>1-(1-t)*(1-t),easeInOutQuadx:t=>t<.5?2*t*t:1-u(-2*t+2,2)/2,easeInCubic:t=>t*t*t,easeOutCubic:t=>1-u(1-t,3),easeInOutCubic:t=>t<.5?4*t*t*t:1-u(-2*t+2,3)/2,easeInQuart:t=>t*t*t*t,easeOutQuart:t=>1-u(1-t,4),easeInOutQuart:t=>t<.5?8*t*t*t*t:1-u(-2*t+2,4)/2,easeInQuint:t=>t*t*t*t*t,easeOutQuint:t=>1-u(1-t,5),easeInOutQuint:t=>t<.5?16*t*t*t*t*t:1-u(-2*t+2,5)/2,easeInSine:t=>1-o(t*c/2),easeOutSine:t=>l(t*c/2),easeInOutSine:t=>-(o(c*t)-1)/2,easeInExpo:t=>0===t?0:u(2,10*t-10),easeOutExpo:t=>1===t?1:1-u(2,-10*t),easeInOutExpo:t=>0===t?0:1===t?1:t<.5?u(2,20*t-10)/2:(2-u(2,-20*t+10))/2,easeInCirc:t=>1-a(1-u(t,2)),easeOutCirc:t=>a(1-u(t-1,2)),easeInOutCirc:t=>t<.5?(1-a(1-u(2*t,2)))/2:(a(1-u(-2*t+2,2))+1)/2,easeInBack:t=>i*t*t*t-s*t*t,easeOutBack:t=>1+i*u(t-1,3)+s*u(t-1,2),easeInOutBack:t=>t<.5?u(2*t,2)*(2*(1+e)*t-e)/2:(u(2*t-2,2)*((1+e)*(2*t-2)+e)+2)/2,easeInElastic:t=>0===t?0:1===t?1:-u(2,10*t-10)*l((10*t-10.75)*r),easeOutElastic:t=>0===t?0:1===t?1:u(2,-10*t)*l((10*t-.75)*r)+1,easeInOutElastic:t=>0===t?0:1===t?1:t<.5?-(u(2,20*t-10)*l((20*t-11.125)*h))/2:u(2,-20*t+10)*l((20*t-11.125)*h)/2+1,easeInBounce:t=>1-n(1-t),easeOutBounce:n,easeInOutBounce:t=>t<.5?(1-n(1-2*t))/2:(1+n(2*t-1))/2}}(),e=()=>performance.now();const i=[];let r=null,t=null;function z(s){var e=(s-t)/16.66;for(let t=0;t{};class y{constructor(t){n(this,y.defaults,t)}start(){return h.add(this),this.onStart.call(this,e(),0),this}stop(){return h.remove(this),this.onStop.call(this,e(),0),this}update(t,s){return this.onUpdate.call(this,t,s),this}complete(t,s){return this.onComplete.call(this,t,s),this}needsUpdate(){return!0}static defaults={onStart:f,onUpdate:f,onStop:f,onComplete:f}}class B extends y{constructor(t){super(n({},B.defaults,t)),this._a=0,this._b=1,this._c=0,this._d=this.reverse?1:0,this._e=0,this._f=null,this.autoStart&&this.start()}reset(){return this._f=null,this._b=1,this._c=0,this._d=this.reverse?1:0,h.remove(this),this.onUpdate(0,0,0),this}pause(){return this._f=e(),h.remove(this),this}start(t){return 0===(t=0!==t?t||this.delay:t)?(this._f?(this._e+=e()-this._f,this._f=null):(this.reverse&&(this._b=D[this._d](this._c),this._d=(this._d+1)%2),this._e=0,this._a=e(),this.onStart(this._a,0,1-this._b)),h.add(this)):setTimeout(this.start.bind(this,0),t),this}update(t,s){var e=V[this.easing]((t-(this._a+this._e))/(this.duration*this._b))*this._b+1-this._b,e=D[this._d](e);return this._c=e,this.onUpdate(t,s,e),this}complete(t,s){var e=(this._d+1)%2;return this._f=null,this.onUpdate(t,s,e),this.onComplete(t,s,e),0t,t=>1-t];var v=(t,s)=>"string"==typeof t?(s||document).querySelectorAll(t):0<=t.length?t:[t];const b=[];class x extends y{constructor(t,s,e){super();var i={};i[s+"start"]=[],i[s]=[],i[s+"end"]=[],this._g=i,this._h=!1,this._i=null,this._j=t,this._k=s,this._l=null,this._m=e||"",this._n=()=>{this._h=!1},this._o=t=>{this._l=t,this._h||(this._h=!0,this.start(),g(this._g[this._k+"start"],t)),clearTimeout(this._i),this._i=setTimeout(this._n,128)},this._j.addEventListener(this._k,this._o,{passive:!0})}destroy(){var t=b.indexOf(this);-1new m(U.scrollWidth,U.scrollHeight),O=()=>new m(d.pageXOffset,d.pageYOffset);class F{constructor(t,s,e){n(this,F.defaults,s),this.element=t,this._p=!1,this._q=!1,this.children=this.children?v(this.children,this.element):[],this.refresh(e),this._p=!0}refresh(t){var s=this.element.getBoundingClientRect(),e=s.height,i=s.width,r=s.right,h=s.bottom,n=d.innerHeight,u=d.innerWidth,a=O(),l=a.x,a=a.y,o=T();return this.distanceRTW=new m(u+i,n+e),this.startRTW=new m(r-this.distanceRTW.x+l,h-this.distanceRTW.y+a),this.startRTE=new m(_(s.left+l-u,0),_(s.top+a-n,0)),this.distanceRTE=new m(p(r+l-this.startRTE.x,o.x-r-l+i,o.x-u),p(h+a-this.startRTE.y,o.y-h-a+e,o.y-n)),this.control(t),this}control(t){var s=t.scroll,e=s.clone().subtract(this.startRTW).divide(this.distanceRTW),s=s.clone().subtract(this.startRTE).divide(this.distanceRTE);return 0<=e.x&&e.x<=1&&0<=e.y&&e.y<=1?(this._q||(this._q=!0,this.onVisibilityStart.call(this,t,w(e),w(s)),this.onVisible.call(this,t,w(e),w(s))),this.onVisible.call(this,t,e,s)):!this._q&&this._p||(this._q=!1,this.onVisible.call(this,t,w(e),w(s)),this.onVisibilityEnd.call(this,t,w(e),w(s))),this.onAlways.call(this,t,e,s),this}static defaults={children:"",onVisible:f,onVisibilityStart:f,onVisibilityEnd:f,onAlways:f}}function w(t){return new m(p(_(0,Q(t.x)),1),p(_(0,Q(t.y)),1))}const I=[];let S=null,R=null,E=null;class L extends y{constructor(t){super(n({},L.defaults,t)),this._r=[],this._s=[],this._t=()=>this.start(),this._u=()=>this.refresh(),this._v=O(),this._h=!0,this._w=T(),R=R||new x(d,"resize"),E=E||new x(d,"scroll"),R.add("resize",this._u),E.add("scrollstart",this._t),I.push(this),L.startAutoRefresh()}destroy(){this._h&&(this._h=!1,I.splice(I.indexOf(this),1),0===I.length?(L.stopAutoRefresh(),R.destroy(),E.destroy(),R=E=null):(R.remove("resize",this._u),E.remove("scrollstart",this._t)))}observe(t,s){var e=v(t),i=this.getScrollInfos();for(let t=0;t{var t=T();if(s.x!==t.x||s.y!==t.y){for(let t=0;t)/g,N=/(\s)/;let H=null;class M{constructor(t,s){n(this,M.defaults,s),this._x=t.innerHTML,this._y=t,this._u=this.split.bind(this),H=H||new x(d,"resize"),this.autoSplit&&this.split(),W.push(this)}destroy(){var t=W.indexOf(this);-1t?this.lineWrapper(t)+s:"";let s="",e="",i=r[0].offsetTop;H.add("resize",this._u);for(let t=0;tN.test(t)?t:this.charWrapper(t),this.preserve))}return this}static defaults={autoSplit:!0,byLine:!1,byWord:!1,byChar:!1,preserve:"st-char",lineWrapper:k("st-line"),wordWrapper:k("st-word"),charWrapper:k("st-char")}}function k(s){return t=>''+t+""}function C(t,s,e){var i=t.childNodes;let r="";for(let t=0;tt.replace(j,s),t=>A(t,P(t,s)))}function X(t,e,i,s){return C(t,t=>{var s=t.trim();return""!==s?(""===e?t:s).split(e).map(i).join(e):t},t=>s&&t.classList.contains(s)?t.outerHTML:A(t,X(t,e,i,s)))}function Y(t,s){return C(t,t=>t,t=>t.classList.contains(s)?t.innerHTML:A(t,Y(t,s)))}function A(t,s){return t.outerHTML.replace(">"+t.innerHTML+"<",">"+s+"<")}function Z(t,s){t.innerHTML=function s(t){return C(t,t=>t.replace("<","[<]"),t=>A(t,s(t)))}(t),t.innerHTML=X(t," ",s).replace("[<]","<")}M.destroy=function(){for(;W[0];)W[0].destroy()};export{y as MainLoopEntry,L as ScrollObserver,M as SplittedText,x as ThrottledEvent,B as Tween,m as Vector2,V as easings}; diff --git a/package.json b/package.json index dc91285..5bcbcb9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oneloop.js", - "version": "5.0.4", + "version": "5.1.0", "description": "Javascript animation library. Provide scroll observer, tween, throttled event, splitted text, vector2, easings in a bundle of about 5kb gzipped", "type": "module", "main": "./build/OneLoop.min.js", diff --git a/src/class/ScrollObserver.js b/src/class/ScrollObserver.js index 0ef9c1a..5b15232 100644 --- a/src/class/ScrollObserver.js +++ b/src/class/ScrollObserver.js @@ -41,7 +41,7 @@ class ScrollObserver extends MainLoopEntry { this._needsUpdate = false // no need to control the index - // the flag needsUpdate do the job + // the flag needsUpdate does the job instances.splice(instances.indexOf(this), 1) if (instances.length === 0) { @@ -140,6 +140,11 @@ class ScrollObserver extends MainLoopEntry { return this } + synchronise() { + this._lastScroll = getWindowScroll() + return this + } + // ---- // statics // ----