Skip to content

Compiler triggers requestAnimationFrame warning when processing GSAP script in nested compositions #402

@vlycser

Description

@vlycser

Describe the bug

When rendering a video, the compiler automatically inlines external CDN scripts to ensure deterministic local rendering. Through testing, I found that if the official GSAP library is included inside a nested composition (loaded via data-composition-src and wrapped in a <template>), the compiler incorrectly flags it.

It scans the inlined GSAP source code within the nested template, detects the native requestAnimationFrame function (which GSAP uses internally), and overly aggressively forces the render into the slower "screenshot capture mode with virtual time enabled".

Notably, this issue only occurs in nested compositions. If the exact same GSAP script is inlined in a standalone root composition, the warning is not triggered.

Link to reproduction

https://github.com/heygen-com/hyperframes

Steps to reproduce

  1. Create a Root composition that loads a nested external composition:
<div id="root" data-composition-id="root" data-width="3840" data-height="2160">
  <!-- Loading the nested composition -->
  <div id="intro" data-composition-id="intro" data-composition-src="compositions/intro.html" data-start="0"></div>
</div>
  1. Create the nested composition (compositions/intro.html) and include the GSAP script inside its <template>:
<template id="intro-template">
  <!-- GSAP script included here triggers the warning -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
  
  <div data-composition-id="intro" data-width="3840" data-height="2160" data-start="0">
    <script>
      window.__timelines = window.__timelines || {};
      window.__timelines["intro"] = gsap.timeline({ paused: true });
    </script>
  </div>
</template>
  1. Run the render command (npx hyperframes render).
  2. Check the console output. The compiler inlines the script into the template but throws the warning:
[Compiler] Inlined CDN script: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js
[WARN] Auto-selected screenshot capture mode for render compatibility {"reasonCodes":["requestAnimationFrame"],"reasons":["Detected raw requestAnimationFrame() in an inline script. This render is routed through screenshot capture mode with virtual time enabled."]}

Expected behavior

The Compiler's parser should behave consistently. If it whitelists/ignores the internal requestAnimationFrame of the official GSAP library in root files, it should apply the same whitelist logic when inlining scripts inside nested <template> compositions.

Actual behavior

[Compiler] Inlined CDN script: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js
[WARN] Auto-selected screenshot capture mode for render compatibility {"reasonCodes":["requestAnimationFrame"],"reasons":["Detected raw requestAnimationFrame() in an inline script. This render is routed through screenshot capture mode with virtual time enabled."]}

Environment

- Framework: HyperFrames (0.4.12)
- OS: WSL - Ubuntu 24.04.4 LTS

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions