Skip to content

Hyperframes Studio cannot edit styles/timelines for GSAP-generated elements #1092

@JamesXiaoFF

Description

@JamesXiaoFF

Problem

Problem

When running:

npx hyperframes preview

the Studio app currently only allows editing regular HTML elements.

However, elements that are dynamically created or controlled by GSAP (for example styles, transforms, timelines, runtime-generated nodes, etc.) are not editable inside the Studio UI.

I completely understand the technical complexity here, especially since GSAP animations are often driven imperatively at runtime rather than declaratively through static DOM state.

That said, I wanted to ask whether there are any plans to support this kind of capability in the future.

Why this matters

I'm currently exploring some video editing workflows built on top of Hyperframes, and many of the elements I want to manipulate are GSAP-driven.

At the moment, the set of editable elements feels somewhat limited for advanced motion/video editing use cases.

Being able to inspect and edit things like:

GSAP-controlled styles
transforms
timeline values
animation parameters
dynamically generated elements

would make Hyperframes significantly more powerful for animation-heavy workflows.

Proposed solution

Not sure if these align with your architecture, but a few possible ideas could be:

  • exposing GSAP timelines as editable entities
  • allowing custom bindings/adapters for runtime-generated elements
  • providing plugin hooks for external animation systems
  • partial read-only inspection support first

Would love to hear whether this is something on the roadmap, or if there are any recommended workarounds / best practices for this kind of use case today.

Alternatives considered

No response

Additional context

No response

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions