Skip to content

feat: add IntersectionObserver staggered fade-in to ValuePropositionSection (Closes #1267) - #1375

Open
waterWang wants to merge 1 commit into
Fluxora-Org:mainfrom
waterWang:feat/value-proposition-staggered-fadein-1267
Open

feat: add IntersectionObserver staggered fade-in to ValuePropositionSection (Closes #1267)#1375
waterWang wants to merge 1 commit into
Fluxora-Org:mainfrom
waterWang:feat/value-proposition-staggered-fadein-1267

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds IntersectionObserver-driven staggered fade-in animation to the four feature cards in ValuePropositionSection.tsx. Each card animates independently with an 80ms incremental delay (0, 80, 160, 240ms) so the reveal reads left-to-right/top-to-bottom. The animation fires once per page load when the section scrolls into view.

Changes

  • src/components/ValuePropositionSection.tsx: Added useIntersectionOnce hook using IntersectionObserver; headline/subhead/cards now fade in from translateY(12px/20px) to translateY(0) using var(--transition-base) (200ms ease-in-out); each card has staggered transitionDelay.
  • src/components/tests/ValuePropositionSection.test.tsx: Mock IntersectionObserver; tests for start-hidden, reveal-on-intersection, and one-shot disconnect behavior.

Closes #1267

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.

Add IntersectionObserver-based staggered fade-in for feature cards in src/components/landing-page/ValuePropositionSection.tsx

1 participant