<div class="snippetease-container" style="all: initial; pointer-events: none; font-family: "JetBrains Mono", monospace;">
<head><link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet"></head>
  <style>
    .snippetease-container,
    .snippetease-container * {
      all: revert;
      box-sizing: border-box;
      pointer-events: auto;
    }
    .snippetease-container {
      font-size: 14px;
      line-height: 1.5;
      margin: 0;
      padding: 0;
    }
    .snippetease-window {
      background-color: #282a36;
      border-radius: 6px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
      margin: 0;
    }
    .snippetease-header {
      background-color: #282a36;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .snippetease-buttons {
      display: flex;
      gap: 5px;
    }
    .snippetease-button {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
    .snippetease-close { background-color: #ff5f56; }
    .snippetease-minimize { background-color: #ffbd2e; }
    .snippetease-maximize { background-color: #27c93f; }
    .snippetease-title {
        font-family: "JetBrains Mono", monospace;
      font-size: 0px;
      color: #f8f8f2;
    }
    .snippetease-code {
      overflow-x: auto;
      margin: 0;
      padding: 0;
    }
    .snippetease-code pre {
      background-color: #282a36 !important;
      margin: 0;
      padding: 16px;
      border-radius: 0;
    }
    .snippetease-code code {
      font-family: "JetBrains Mono", monospace;
      line-height: inherit;
      tab-size: 4;
    }
    code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family: "JetBrains Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#282a36}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6272a4}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#ff79c6}.token.boolean,.token.number{color:#bd93f9}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#50fa7b}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#f1fa8c}.token.keyword{color:#8be9fd}.token.regex,.token.important{color:#ffb86c}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}
  </style>
  <div class="snippetease-container">
    <div class="snippetease-window">
      <div class="snippetease-header">
        <div class="snippetease-buttons">
          <div class="snippetease-button snippetease-close"></div>
          <div class="snippetease-button snippetease-minimize"></div>
          <div class="snippetease-button snippetease-maximize"></div>
        </div>
        <span class="snippetease-title">javascript</span>
      </div>
      <div class="snippetease-code">
        <pre style="font-family: "JetBrains Mono", monospace;" class="language-javascript"><code style="font-family: "JetBrains Mono", monospace;" class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">trackAnimationProgress</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">animation<span class="token punctuation">,</span> cb<span class="token punctuation">,</span> precision <span class="token operator">=</span> <span class="token number">5</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> progress <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token function-variable function">updateValue</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>animation <span class="token operator">&amp;&amp;</span> animation<span class="token punctuation">.</span>currentTime<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> newProgress <span class="token operator">=</span> animation<span class="token punctuation">.</span>effect<span class="token punctuation">.</span><span class="token function">getComputedTiming</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>progress <span class="token operator">*</span> <span class="token number">1</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>animation<span class="token punctuation">.</span>playState <span class="token operator">===</span> <span class="token string">"finished"</span><span class="token punctuation">)</span> newProgress <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
      newProgress <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0.0</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token number">1.0</span><span class="token punctuation">,</span> newProgress<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span>precision<span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token keyword">if</span> <span class="token punctuation">(</span>newProgress <span class="token operator">!=</span> progress<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        progress <span class="token operator">=</span> newProgress<span class="token punctuation">;</span>
        <span class="token function">cb</span><span class="token punctuation">(</span>progress<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>updateValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>updateValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> model <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"model-viewer"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">trackAnimationProgress</span><span class="token punctuation">(</span>model<span class="token punctuation">.</span><span class="token function">getAnimations</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">progress</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
  model<span class="token punctuation">.</span>orientation <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">0deg 0deg </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>progress <span class="token operator">*</span> <span class="token operator">-</span><span class="token number">360</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">deg</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
      </div>
    </div>
  </div>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.