@vtbag/cam-shaft
Version:
The Cam-Shaft bumps your view transition images into place to avoid the pseudo-smooth-scroll effect when applying view transitions to elements that are taller than the viewport.
2 lines (1 loc) • 1.64 kB
JavaScript
;(()=>{var d=document.currentScript?.dataset.viewTransitionNames?.split(/\s+/)??["main"],r=[],l=[],g=[];for(let e of d){let[a,i]=e.split("@");if(g.push(a),i){let[t,o]=i.split("&");r.push(parseInt(t,10)),l.push(parseInt(o,10))}else r.push(0),l.push(0)}addEventListener("pageswap",e=>{sessionStorage.setItem("vtbagCamshaftScrollY",""+scrollY),sessionStorage.setItem("vtbagCamshaftNavigationType",e.activation?.navigationType??"unknown")});addEventListener("pagereveal",async e=>{if(!e.viewTransition)return;let a=0;if(sessionStorage.getItem("vtbagCamshaftNavigationType")==="traverse")a=scrollY;else{let t=location.hash??"#top";t&&(document.documentElement.querySelector(t)?.scrollIntoView({behavior:"instant",block:"start"}),a=scrollY)}let i=parseFloat(sessionStorage.getItem("vtbagCamshaftScrollY")??"0");await e.viewTransition?.ready,g?.forEach((t,o)=>{let n=getComputedStyle(document.documentElement,`::view-transition-group(${t})`),s=n.animationName;if(s.startsWith('"')&&(s=s.slice(1,-1)),s===`-ua-view-transition-group-anim-${t}`){let c=u=>{let p=parseFloat(u);return u.endsWith("ms")?p:p*1e3},m={id:`vtbag-camshaft-${t}-old`,pseudoElement:`::view-transition-old(${t})`,composite:"accumulate",fill:n.animationFillMode,easing:n.animationTimingFunction,duration:r[o]||c(n.animationDuration)};document.documentElement.animate({top:["0px",`${a-i}px`]},m),m={id:`vtbag-camshaft-${t}-new`,pseudoElement:`::view-transition-new(${t})`,composite:"accumulate",fill:n.animationFillMode,easing:n.animationTimingFunction,duration:l[o]||r[o]||c(n.animationDuration)},document.documentElement.animate({top:[`${i-a}px`,"0px"]},m)}})});})();