diff --git a/packages/studio/src/components/nle/useTimelineEditCallbacks.ts b/packages/studio/src/components/nle/useTimelineEditCallbacks.ts index fa80561bb..f6e6f68f9 100644 --- a/packages/studio/src/components/nle/useTimelineEditCallbacks.ts +++ b/packages/studio/src/components/nle/useTimelineEditCallbacks.ts @@ -11,6 +11,7 @@ import { } from "../../contexts/DomEditContext"; import { resolveTweenStart, resolveTweenDuration } from "../../utils/globalTimeCompiler"; import { resolveClipTimingBasis } from "../../hooks/useGsapTweenCache"; +import { elementCacheKeys } from "../../hooks/gsapKeyframeCacheHelpers"; import { resolveKeyframeRetime } from "../editor/keyframeRetime"; import type { DomEditSelection } from "../editor/domEditingTypes"; import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter"; @@ -121,12 +122,13 @@ export function useTimelineEditCallbacks({ const { gsapAnimations } = usePlayerStore.getState(); const { sourceFile, domId } = splitTimelineElementKey(elementKey); const scope = sourceFile ?? activeCompPath ?? "index.html"; - return ( - gsapAnimations.get(`${scope}#${domId}`) ?? - gsapAnimations.get(`index.html#${domId}`) ?? - gsapAnimations.get(domId) ?? - [] - ); + // elementCacheKeys owns the key-variant list the writers use; reading it + // back by hand here is how the two sides drift. + for (const key of elementCacheKeys(scope, domId)) { + const animations = gsapAnimations.get(key); + if (animations) return animations; + } + return []; }, [activeCompPath], ); diff --git a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts index 1e806a029..efe0941df 100644 --- a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts +++ b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts @@ -113,7 +113,8 @@ export function clearKeyframeCacheForFile(sourceFile: string): void { } } -function elementCacheKeys(sourceFile: string, elementId: string): string[] { +/** Every cache key a write for this element sets, in read-preference order. */ +export function elementCacheKeys(sourceFile: string, elementId: string): string[] { return sourceFile === "index.html" ? [`index.html#${elementId}`, elementId] : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId];