worklet-animation-with-scroll-timeline.https.html (1928B)
1 <html class="reftest-wait"> 2 <title>Basic use of scroll timeline with WorkletAnimation</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" content="Should be able to use the scroll timeline to drive the worklet animation timing"> 5 <link rel="match" href="worklet-animation-with-scroll-timeline-ref.html"> 6 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="common.js"></script> 10 11 <style> 12 #box { 13 width: 100px; 14 height: 100px; 15 background-color: green; 16 } 17 18 #covered { 19 width: 100px; 20 height: 100px; 21 background-color: red; 22 } 23 24 /* Hide scrollbars to avoid unnecessary visual issues related to them */ 25 #scroller::-webkit-scrollbar { 26 display: none; 27 } 28 29 #scroller { 30 scrollbar-width: none; 31 overflow: auto; 32 height: 100px; 33 width: 100px; 34 will-change: transform; /* force compositing */ 35 } 36 37 #contents { 38 height: 1000px; 39 width: 100%; 40 } 41 </style> 42 43 <div id="box"></div> 44 <div id="covered"></div> 45 <div id="scroller"> 46 <div id="contents"></div> 47 </div> 48 49 <script> 50 registerPassthroughAnimator().then(() => { 51 const box = document.getElementById('box'); 52 const effect = new KeyframeEffect(box, 53 [ 54 { transform: 'translateY(0)', opacity: 1 }, 55 { transform: 'translateY(200px)', opacity: 0 } 56 ], { 57 duration: 1000, 58 } 59 ); 60 61 const scroller = document.getElementById('scroller'); 62 const timeline = new ScrollTimeline({ scrollSource: scroller, orientation: 'block' }); 63 const animation = new WorkletAnimation('passthrough', effect, timeline); 64 animation.play(); 65 66 // Move the scroller to the halfway point. 67 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 68 scroller.scrollTop = 0.5 * maxScroll; 69 70 waitForAsyncAnimationFrames(1).then(_ => { 71 takeScreenshot(); 72 }); 73 }); 74 </script>