animator-iframe.html (1192B)
1 <!DOCTYPE html> 2 <style> 3 .greenbox { 4 width: 100px; 5 height: 100px; 6 background-color: #00ff00; 7 } 8 </style> 9 <script src="/web-animations/testcommon.js"></script> 10 <script src="../common.js"></script> 11 12 <script id="iframe_worklet" type="text/worklet"> 13 registerAnimator("iframe_animator", class { 14 animate(currentTime, effect) { 15 effect.localTime = 600; 16 } 17 }); 18 registerAnimator("duplicate_animator", class { 19 animate(currentTime, effect) { 20 effect.localTime = 800; 21 } 22 }); 23 </script> 24 25 <div id="iframe_target" class="greenbox"></div> 26 27 <script> 28 runInAnimationWorklet( 29 document.getElementById('iframe_worklet').textContent 30 ).then(_ => { 31 const target = document.getElementById('iframe_target'); 32 // Only create an animation for iframe_animator. 33 const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 }); 34 const animation = new WorkletAnimation('iframe_animator', effect); 35 animation.play(); 36 37 // wait until local times are synced back to the main thread. 38 waitForAnimationFrameWithCondition(_ => { 39 return getComputedStyle(target).opacity != '1'; 40 }).then(_ => { 41 window.parent.postMessage(getComputedStyle(target).opacity, '*'); 42 }); 43 }); 44 </script>