feat(gsap): add innerText support to GSAP inspector for counter animations (#1244)

Adds 'innerText' as a supported GSAP property so number roll-up animations
(count-up from 0 to some value) are visible and editable in the GSAP inspector
panel.

- Add 'innerText' to SUPPORTED_PROPS in gsapConstants.ts
- Add label 'Counter Value', tooltip, and step constraint (1) in
  gsapAnimationConstants.ts

The snap modifier that controls integer rounding is already preserved
verbatim via the EXTRAS_KEYS round-trip, so rounding behavior survives
edits without any additional UI changes.

Closes #1179
This commit is contained in:
Miguel Ángel
2026-06-06 17:27:08 -04:00
committed by GitHub
parent 731bc78f63
commit 05aac941fc
2 changed files with 5 additions and 0 deletions
@@ -37,6 +37,7 @@ export const PROP_LABELS: Record<string, string> = {
letterSpacing: "Tracking",
skewX: "Skew X",
skewY: "Skew Y",
innerText: "Counter Value",
};
export const PROP_UNITS: Record<string, string> = {
@@ -65,6 +66,7 @@ export const PROP_TOOLTIPS: Record<string, string> = {
height: "Element height",
autoAlpha: "Like opacity but hides element completely at 0",
visibility: "Show or hide the element",
innerText: "End value for a number roll-up (the number it counts up/down to)",
};
export const EASE_LABELS: Record<string, string> = {
@@ -154,6 +156,7 @@ export const PROP_CONSTRAINTS: Record<string, { min?: number; max?: number; step
y: { step: 1 },
fontSize: { min: 1, step: 1 },
letterSpacing: { step: 0.1 },
innerText: { step: 1 },
};
export function clampPropertyValue(prop: string, value: number): number {