Reveal Animation #485
Open
Reveal Animation #485
+1,077
−66
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Reorganize import order in attributes-editor (radix icons before lodash) - Standardize quote style from single to double quotes throughout - Enhance attributes editor form layout with improved spacing and labels - Update input/textarea styling with focus states and consistent heights - Conditionally render attributes list only when items exist - Filter out data-animation from block attributes display - Preserve existing data-animation when
|
@kgpatidar is attempting to deploy a commit to the Chai Builder Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a comprehensive reveal animation system that allows elements to animate into view as users scroll. The implementation is SEO-friendly (content remains in DOM), performance-optimized (uses GPU-accelerated properties), and respects user accessibility preferences (supports prefers-reduced-motion).
Key Changes:
- Added animation infrastructure with IntersectionObserver-based trigger system supporting 6 animation types (fade, slide, zoom, flip, rotate, bounce) with multiple directional variants
- Integrated animation controls into the block settings panel with visual direction selectors and configurable duration/delay/easing options
- Exported
ChaiAnimationContainercomponent for public API consumption
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
src/render/animation/animation-container.tsx |
Container component that initializes animation system via custom hook |
src/render/animation/use-chai-animation.ts |
Hook that manages IntersectionObserver setup and DOM mutation tracking for animated elements |
src/render/animation/animation-utils.ts |
Utilities for animation serialization, CSS class generation, and configuration options |
src/render/animation/animation-styles.css |
CSS animations with GPU-accelerated transforms and accessibility support |
src/render/animation/animation-field.tsx |
UI component for configuring animation parameters in the settings panel |
src/render/render-chai-blocks.tsx |
Wraps rendered blocks with AnimationContainer to enable animation functionality |
src/core/main/index.ts |
Exports ChaiAnimationContainer for external consumption and fixes formatting |
src/core/components/settings/settings-panel.tsx |
Integrates AnimationField into both tabbed and non-tabbed settings layouts |
src/core/components/settings/new-panel/block-attributes-editor.tsx |
Filters out data-animation from user-editable attributes and preserves it during updates |
src/core/components/settings/new-panel/attributes-editor.tsx |
UI improvements including better styling, conditional rendering, and import reordering |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add animation flag to feature flags documentation with default false value - Update types reference with animation flag in ChaiBuilderEditorProps - Enable animation flag by default in ChaiBuilderDefault editor - Wrap AnimationField component with feature flag check using useBuilderProp - Add animation flag to ChaiBuilderEditorProps interface type definition
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.