WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
Slight reduction
bug-274606.html (text/html), 13.94 KB, created by
Antoine Quint
on 2024-05-24 06:26:01 PDT
(
hide
)
Description:
Slight reduction
Filename:
MIME Type:
Creator:
Antoine Quint
Created:
2024-05-24 06:26:01 PDT
Size:
13.94 KB
patch
obsolete
><!DOCTYPE html> ><html lang="en" > > ><head> > <meta charset="UTF-8"> > ><style> > >@layer reset { > * { > box-sizing: border-box; > } > > html, > body, > ul[class] { > margin: 0; > padding: 0; > } > > html, > body { > width: 100%; > } > > ul[class] { > list-style: none; > } > > img { > max-width: 100%; > height: auto; > } >} > >@layer baselayout { > html { > font-family: system-ui, sans-serif; > background-color: #f6f6f6; > } > main { > width: 100%; > min-width: 360px; > max-width: 500px; > margin: 0 auto; > } > button { > position: fixed; > right: 1rem; > top: 1rem; > font-size: 1.5em; > padding: 0.25em 0.5em; > } >} > >@layer card { > .card { > background: black; > color: white; > text-align: center; > padding: 2rem 3rem 0; > position: relative; > > display: grid; > grid-template: > "meta" auto > "title" 100px > "moremeta" auto > "description" 80px > "cover" auto / auto; > align-items: center; > gap: 1rem; > } > > .meta { > grid-area: meta; > } > .title { > grid-area: title; > } > .moremeta { > grid-area: moremeta; > } > .description { > grid-area: description; > } > .cover { > grid-area: cover; > } > > .card.small { > grid-template: > "cover title" 1fr > "cover moremeta" 1fr / 80px auto; > gap: 0; > padding: 1rem 0 0 3rem; > > .title { > align-self: end; > } > .moremeta { > align-self: start; > } > > .description, > .meta { > display: none; > } > } > > .card * { > margin: 0; > } > > .meta { > display: flex; > flex-direction: column; > align-items: center; > gap: 1rem; > > .name { > font-weight: bold; > text-transform: uppercase; > } > > .date { > font-size: 0.8em; > color: #ccc; > } > } > > .avatar { > display: block; > width: 50px; > height: 50px; > border-radius: 50%; > outline: 1px solid #fff; > outline-offset: 3px; > } > > .moremeta { > display: flex; > flex-direction: row; > gap: 0.5em; > justify-content: center; > color: #ccc; > } > > .description { > width: 90%; > margin: 0 auto; > text-wrap: balance; > color: #ccc; > } > > .back { > position: absolute; > left: 1rem; > top: 2rem; > width: 2rem; > display: grid; > justify-content: start; > text-decoration: none; > font-size: 2em; > color: white; > } >} > >@layer tracklist { > .tracks { > display: flex; > flex-direction: column; > } > > .track { > padding: 1em; > display: flex; > flex-direction: row; > gap: 1em; > > &:hover { > background: #eee; > } > } > > .album { > display: block; > width: 4em; > aspect-ratio: 1; > border-radius: 0.25em; > } > > .trackinfo { > flex: 1; > > display: flex; > flex-direction: column; > justify-content: center; > > .tracktitle { > font-weight: bold; > } > } > > .more { > justify-self: end; > color: #ccc; > font-size: 2rem; > > display: flex; > flex-direction: column; > justify-content: center; > > &:hover { > cursor: pointer; > color: red; > } > } >} > >.avatar { > background-color: aqua; >} ></style> > ></head> > ><body translate="no"> > <main> > <div class="card"> > <a href="#" class="back">←</a> > <div class="meta"> > <img src="" alt="Avatar of Bramus" width="800" height="800" class="avatar" draggable="false"> > <div> > <div class="name">Bramus</div> > <div class="date">Jan 2024</div> > </div> > </div> > <h1 class="title">Summer Vibes</h1> > <ul class="moremeta"> > <li>15 songs</li> > <li>59 minutes</li> > </ul> > <div class="description"> > <p>Most popular songs for that summer feeling | Updated weekly | Good vibes only | Photo by Atikh Bana</p> > </div> > <img src="https://live-transitions-sda.netlify.app/sax-player.webp" alt="" width="668" height="900" class="cover" draggable="false"> > </div> > <ul class="tracks"> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > <li class="track"> > <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> > <div class="trackinfo"> > <div class="tracktitle">Who needs to know?</div> > <div class="artist">Bramus</div> > </div> > <div class="more"> > ♥ > </div> > </li> > </ul> ></main> > > <script id="rendered-js" > >// This version: >// - Same as V1 (https://codepen.io/bramus/pen/bGZWwxJ) >// - Starts a VT that remains active >// - Adds a scroll listener that updates the VTâs animations based on the scroll position via scrollTop >// - Re-initializes everything on resize, as ongoing VTs get cancelled on resize >// - Only creates the VT when in range > > >const go = () => { > let activeViewTransition = null; > let activeAnimations = []; > > const $card = document.querySelector('.card'); > const $tracks = document.querySelector('.tracks'); > > const cardHeight = CSS.px($card.offsetHeight); > const cardWidth = CSS.px($card.offsetWidth); > const cardHeightSmall = CSS.px(120); // @TODO: Make this dynamic > > // Determine things to track > const scrollTimelineAxis = 'y'; > let scrollTimelineStart = CSS.px(0); > let scrollTimelineEnd = cardHeight.sub(cardHeightSmall); > > // Make the card faux-sticky, and offset the tracks > $card.style.width = cardWidth; > $card.style.position = 'fixed'; > $card.style.zIndex = '1'; > $card.style.top = '0'; > $tracks.style.paddingTop = cardHeight; > > // The base duration of the animation > // Same as --vt-base-duration in the CSS > const baseDuration = 1000; > > const scrollDistance = scrollTimelineEnd.sub(scrollTimelineStart); > > // Method that starts the View Transition > const startViewTransition = async () => { > // Determine if we are going back or not > const isReverse = document.querySelector('.small') ? true : false; > > // Start the View Transition > activeViewTransition = document.startViewTransition(() => { > document.querySelector('.card').classList.toggle('small'); > }); > await activeViewTransition.ready; > > // Immediately pause all animations linked to it > activeAnimations = document.getAnimations().filter((anim) => > anim.effect.target === document.documentElement && anim.effect.pseudoElement?.startsWith("::view-transition")); > > for (const anim of activeAnimations) { > if (isReverse) anim.reverse(); > anim.pause(); > } > > // Make sure animations their currentTime is up-to-date > updateAnimations(); > > // The VT finishes when all the animations have reached 100%, > // i.e. when having scroll past the scrollTimelineEnd offset. > await activeViewTransition.finished; > > // Make sure the card has the correct end state > if (document.documentElement.scrollTop > scrollTimelineStart.value) { > document.querySelector('.card').classList.add('small'); > } else { > document.querySelector('.card').classList.remove('small'); > } > > // Clear activeViewTransition so that scroll listener can create a new VT once in the correct range > activeViewTransition = null; > }; > > // Method that updates the tracked animations > const updateAnimations = () => { > // No need to do anything when there are no animations being tracked > if (!activeAnimations.length) return; > > const scrollProgress = (document.documentElement.scrollTop - scrollTimelineStart.value) / scrollDistance.value; > > // Determine time based on dragging delta > // Clamp it between 0 and baseDuration. > const currentTime = Math.max(0, Math.min(baseDuration, scrollProgress * baseDuration)); > > for (const animation of activeAnimations) { > // Take playbackRate into account > if (animation.playbackRate === -1) { > animation.currentTime = baseDuration - currentTime; > } else { > animation.currentTime = currentTime; > } > } > > }; > > const checkScrollPosition = async () => { > // In-range: start or update the VT > if ( > document.documentElement.scrollTop > scrollTimelineStart.value && > document.documentElement.scrollTop < scrollTimelineEnd.value) > { > if (!activeViewTransition) { > startViewTransition(); > } else { > updateAnimations(); > } > } > > // Outside of the range: clean up the VT > else { > > // Explicitly clear the VT when outside the range. > // This because when undershooting the scrollTimelineStart offset, the VT doesnât finish automatically > // (When overshooting the scrollTimelineEnd offset it does cancel automatically) > if (activeViewTransition) { > activeViewTransition.skipTransition(); > activeViewTransition = null; > } > > // Make sure the card has the correct class depending on the scroll offset > if (document.documentElement.scrollTop >= scrollTimelineEnd.value) { > document.querySelector('.card:not(.small)')?.classList.add('small'); > } else { > document.querySelector('.card.small')?.classList.remove('small'); > } > } > }; > > // Add a scroll listener, and update the viewTransition based on the active offset > window.addEventListener('scroll', checkScrollPosition); > > // On resize View Transitions get cancelled, so we need to make sure weâre at the correct state again > // @TODO: Debounce this > window.addEventListener('resize', checkScrollPosition); > > // Make sure the card has the correct class when already at the specific offset > checkScrollPosition(); >}; > >window.addEventListener('load', () => { > go(); >}); >//# sourceURL=pen.js > </script> > > ></body> > ></html>
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @layer reset { * { box-sizing: border-box; } html, body, ul[class] { margin: 0; padding: 0; } html, body { width: 100%; } ul[class] { list-style: none; } img { max-width: 100%; height: auto; } } @layer baselayout { html { font-family: system-ui, sans-serif; background-color: #f6f6f6; } main { width: 100%; min-width: 360px; max-width: 500px; margin: 0 auto; } button { position: fixed; right: 1rem; top: 1rem; font-size: 1.5em; padding: 0.25em 0.5em; } } @layer card { .card { background: black; color: white; text-align: center; padding: 2rem 3rem 0; position: relative; display: grid; grid-template: "meta" auto "title" 100px "moremeta" auto "description" 80px "cover" auto / auto; align-items: center; gap: 1rem; } .meta { grid-area: meta; } .title { grid-area: title; } .moremeta { grid-area: moremeta; } .description { grid-area: description; } .cover { grid-area: cover; } .card.small { grid-template: "cover title" 1fr "cover moremeta" 1fr / 80px auto; gap: 0; padding: 1rem 0 0 3rem; .title { align-self: end; } .moremeta { align-self: start; } .description, .meta { display: none; } } .card * { margin: 0; } .meta { display: flex; flex-direction: column; align-items: center; gap: 1rem; .name { font-weight: bold; text-transform: uppercase; } .date { font-size: 0.8em; color: #ccc; } } .avatar { display: block; width: 50px; height: 50px; border-radius: 50%; outline: 1px solid #fff; outline-offset: 3px; } .moremeta { display: flex; flex-direction: row; gap: 0.5em; justify-content: center; color: #ccc; } .description { width: 90%; margin: 0 auto; text-wrap: balance; color: #ccc; } .back { position: absolute; left: 1rem; top: 2rem; width: 2rem; display: grid; justify-content: start; text-decoration: none; font-size: 2em; color: white; } } @layer tracklist { .tracks { display: flex; flex-direction: column; } .track { padding: 1em; display: flex; flex-direction: row; gap: 1em; &:hover { background: #eee; } } .album { display: block; width: 4em; aspect-ratio: 1; border-radius: 0.25em; } .trackinfo { flex: 1; display: flex; flex-direction: column; justify-content: center; .tracktitle { font-weight: bold; } } .more { justify-self: end; color: #ccc; font-size: 2rem; display: flex; flex-direction: column; justify-content: center; &:hover { cursor: pointer; color: red; } } } .avatar { background-color: aqua; } </style> </head> <body translate="no"> <main> <div class="card"> <a href="#" class="back">←</a> <div class="meta"> <img src="" alt="Avatar of Bramus" width="800" height="800" class="avatar" draggable="false"> <div> <div class="name">Bramus</div> <div class="date">Jan 2024</div> </div> </div> <h1 class="title">Summer Vibes</h1> <ul class="moremeta"> <li>15 songs</li> <li>59 minutes</li> </ul> <div class="description"> <p>Most popular songs for that summer feeling | Updated weekly | Good vibes only | Photo by Atikh Bana</p> </div> <img src="https://live-transitions-sda.netlify.app/sax-player.webp" alt="" width="668" height="900" class="cover" draggable="false"> </div> <ul class="tracks"> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> <li class="track"> <img src="" alt="Album Cover" width="800" height="800" class="album" draggable="false"> <div class="trackinfo"> <div class="tracktitle">Who needs to know?</div> <div class="artist">Bramus</div> </div> <div class="more"> ♥ </div> </li> </ul> </main> <script id="rendered-js" > // This version: // - Same as V1 (https://codepen.io/bramus/pen/bGZWwxJ) // - Starts a VT that remains active // - Adds a scroll listener that updates the VTâs animations based on the scroll position via scrollTop // - Re-initializes everything on resize, as ongoing VTs get cancelled on resize // - Only creates the VT when in range const go = () => { let activeViewTransition = null; let activeAnimations = []; const $card = document.querySelector('.card'); const $tracks = document.querySelector('.tracks'); const cardHeight = CSS.px($card.offsetHeight); const cardWidth = CSS.px($card.offsetWidth); const cardHeightSmall = CSS.px(120); // @TODO: Make this dynamic // Determine things to track const scrollTimelineAxis = 'y'; let scrollTimelineStart = CSS.px(0); let scrollTimelineEnd = cardHeight.sub(cardHeightSmall); // Make the card faux-sticky, and offset the tracks $card.style.width = cardWidth; $card.style.position = 'fixed'; $card.style.zIndex = '1'; $card.style.top = '0'; $tracks.style.paddingTop = cardHeight; // The base duration of the animation // Same as --vt-base-duration in the CSS const baseDuration = 1000; const scrollDistance = scrollTimelineEnd.sub(scrollTimelineStart); // Method that starts the View Transition const startViewTransition = async () => { // Determine if we are going back or not const isReverse = document.querySelector('.small') ? true : false; // Start the View Transition activeViewTransition = document.startViewTransition(() => { document.querySelector('.card').classList.toggle('small'); }); await activeViewTransition.ready; // Immediately pause all animations linked to it activeAnimations = document.getAnimations().filter((anim) => anim.effect.target === document.documentElement && anim.effect.pseudoElement?.startsWith("::view-transition")); for (const anim of activeAnimations) { if (isReverse) anim.reverse(); anim.pause(); } // Make sure animations their currentTime is up-to-date updateAnimations(); // The VT finishes when all the animations have reached 100%, // i.e. when having scroll past the scrollTimelineEnd offset. await activeViewTransition.finished; // Make sure the card has the correct end state if (document.documentElement.scrollTop > scrollTimelineStart.value) { document.querySelector('.card').classList.add('small'); } else { document.querySelector('.card').classList.remove('small'); } // Clear activeViewTransition so that scroll listener can create a new VT once in the correct range activeViewTransition = null; }; // Method that updates the tracked animations const updateAnimations = () => { // No need to do anything when there are no animations being tracked if (!activeAnimations.length) return; const scrollProgress = (document.documentElement.scrollTop - scrollTimelineStart.value) / scrollDistance.value; // Determine time based on dragging delta // Clamp it between 0 and baseDuration. const currentTime = Math.max(0, Math.min(baseDuration, scrollProgress * baseDuration)); for (const animation of activeAnimations) { // Take playbackRate into account if (animation.playbackRate === -1) { animation.currentTime = baseDuration - currentTime; } else { animation.currentTime = currentTime; } } }; const checkScrollPosition = async () => { // In-range: start or update the VT if ( document.documentElement.scrollTop > scrollTimelineStart.value && document.documentElement.scrollTop < scrollTimelineEnd.value) { if (!activeViewTransition) { startViewTransition(); } else { updateAnimations(); } } // Outside of the range: clean up the VT else { // Explicitly clear the VT when outside the range. // This because when undershooting the scrollTimelineStart offset, the VT doesnât finish automatically // (When overshooting the scrollTimelineEnd offset it does cancel automatically) if (activeViewTransition) { activeViewTransition.skipTransition(); activeViewTransition = null; } // Make sure the card has the correct class depending on the scroll offset if (document.documentElement.scrollTop >= scrollTimelineEnd.value) { document.querySelector('.card:not(.small)')?.classList.add('small'); } else { document.querySelector('.card.small')?.classList.remove('small'); } } }; // Add a scroll listener, and update the viewTransition based on the active offset window.addEventListener('scroll', checkScrollPosition); // On resize View Transitions get cancelled, so we need to make sure weâre at the correct state again // @TODO: Debounce this window.addEventListener('resize', checkScrollPosition); // Make sure the card has the correct class when already at the specific offset checkScrollPosition(); }; window.addEventListener('load', () => { go(); }); //# sourceURL=pen.js </script> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 274606
:
471484
| 471493