two-animations-attach-to-same-scroll-timeline.html (1934B)
1 <html class="reftest-wait"> 2 <title>Scroll timeline shared by two animation</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations/"> 4 <meta name="assert" content="Should be able to use the same scroll timeline to 5 drive two animations"> 6 <link rel="match" href="animation-ref.html"> 7 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="/common/reftest-wait.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 #scroller { 25 overflow: hidden; 26 height: 100px; 27 width: 100px; 28 will-change: transform; /* force compositing */ 29 } 30 31 #contents { 32 height: 1000px; 33 width: 100%; 34 } 35 </style> 36 37 <div id="box"></div> 38 <div id="covered"></div> 39 <div id="scroller"> 40 <div id="contents"><p>Scrolling Contents</p></div> 41 </div> 42 43 <script> 44 const box = document.getElementById('box'); 45 const transform_effect = new KeyframeEffect(box, 46 [ 47 { transform: 'translateY(0)'}, 48 { transform: 'translateY(200px)'} 49 ], { 50 duration: 1000, 51 } 52 ); 53 const opacity_effect = new KeyframeEffect(box, 54 [ 55 { opacity: 1}, 56 { opacity: 0} 57 ], { 58 duration: 1000, 59 } 60 ); 61 62 const scroller = document.getElementById('scroller'); 63 const timeline = new ScrollTimeline( 64 { source: scroller, orientation: 'block' }); 65 const transform_animation = new Animation(transform_effect, timeline); 66 transform_animation.play(); 67 const opacity_animation = new Animation(opacity_effect, timeline); 68 opacity_animation.play(); 69 70 Promise.all([transform_animation.ready, opacity_animation.ready]).then(() => { 71 // Move the scroller to the halfway point. 72 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 73 scroller.scrollTop = 0.5 * maxScroll; 74 75 waitForAnimationFrames(2).then(_ => { 76 takeScreenshot(); 77 }); 78 }); 79 </script>