Skip to content

fix: preserve initial animation state for components in rich text#119

Merged
liamwalder merged 2 commits intodevelopfrom
fix/richtext-component-animation-initial-state
Apr 1, 2026
Merged

fix: preserve initial animation state for components in rich text#119
liamwalder merged 2 commits intodevelopfrom
fix/richtext-component-animation-initial-state

Conversation

@lunenas
Copy link
Copy Markdown
Collaborator

@lunenas lunenas commented Mar 31, 2026

Summary

Fix components embedded in rich text losing their initial animation state on
the published website. The initial animation CSS (opacity, transforms, hidden
state) was not generated for these components because their layer IDs are
namespaced differently and excluded from the page-level CSS traversal.

Changes

  • Add injectInitialCSS prop to AnimationInitializer that generates and
    injects a <style> tag with initial animation CSS for its layer subtree
  • Enable injectInitialCSS for rich-text embedded component blocks in
    LayerRenderer
  • Generate initial animation CSS inline in the SSR HTML path for embedded
    components in page-fetcher.ts

Test plan

  • Add a component with animations (e.g. fade-in on scroll) to rich text
  • Publish the site and verify the component starts in its initial state
    (e.g. opacity 0) before the animation triggers
  • Verify no flash/flicker of the final state before animation runs
  • Verify standalone components (not in rich text) still animate correctly
  • Verify components with display: hidden initial state work in rich text

Made with Cursor

Components embedded in rich text were missing their initial animation
CSS because generateInitialAnimationCSS only walks the page-level
layer tree. Rich-text component layers are namespaced differently and
excluded from that traversal, causing a flash before GSAP initializes.

Generate and inject initial animation CSS per embedded component block
in both the React client path and the SSR HTML path.

Made-with: Cursor
@liamwalder liamwalder merged commit efd37c9 into develop Apr 1, 2026
2 checks passed
@liamwalder liamwalder deleted the fix/richtext-component-animation-initial-state branch April 1, 2026 10:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants