Simplify scroll reveal animation with CSS transitions#5
Merged
Conversation
Adds @playwright/test (pinned 1.56.0 to match local chromium rev 1194),
scripts/capture-screenshots.mjs and npm run screenshot:{baseline,after}.
Captures full-page + clipped per-section PNGs at 375/430/768/1280/1440 so
mobile + desktop changes are visible before/after.
https://claude.ai/code/session_014BQEj343rKYdVUCEGhdPBN
Replaces the per-frame rAF manager (300px translate, 20% settle band, same easing power for 'base' and 'slow') with a shared IO that flips .is-visible once and unobserves. Initial offset drops to 36px and is gated behind .js-ready on <html>, so no-JS and slow-hydration users see content in place instead of a blank page (the previous default hid content 300px below with opacity 0). Stagger is driven by --stagger-index and CSS transition-delay, passed via index prop on benefit/install/science list items. 'speed=slow' was dead code (same ease power as base) and has been removed. https://claude.ai/code/session_014BQEj343rKYdVUCEGhdPBN
Playwright's fullPage CDP capture does not fire scroll/resize events, so IntersectionObserver-gated content stays hidden in the screenshot. Walk the page top-to-bottom before the fullpage capture so every scroll-intro reveals, and also capture a separate first-paint.png to surface hidden-content regressions on initial load. https://claude.ai/code/session_014BQEj343rKYdVUCEGhdPBN
… token header - Remove duplicate @media (max-width: 1023.98px) block (rules were either duplicated or overridden in the second block) - Merge duplicate @media (max-width: 599.98px) blocks; second block overrode depth-lab grid columns from 2-col to 1-col — consolidated into single block with corrected declarations - Add design-token summary comment at top of styles.css to orient contributors (breakpoints, shell, space scale, scroll-reveal) - Remove stale "site currently broken" badge and text from README; replace with live site link https://claude.ai/code/session_014BQEj343rKYdVUCEGhdPBN
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
Refactored the scroll-reveal animation system from a complex JavaScript-based approach with frame-by-frame easing calculations to a simpler CSS transition-based system using IntersectionObserver.
Key Changes
Removed complex scroll animation logic: Eliminated ~200 lines of JavaScript handling easing functions, progress calculations, active record tracking, and frame-based measurements (
easeOutPower,applyScrollIntroState,measureActiveRecords, etc.)Simplified IntersectionObserver: Replaced sophisticated observer with threshold-based intersection detection that simply adds an
is-visibleclass when elements enter the viewportCSS-driven animations: Moved animation logic to CSS with:
--stagger-indexCSS variable instead of speed-based multipliersUpdated ScrollIntro component:
speedprop (was 'base' or 'slow')indexprop for stagger calculationsCSS refinements:
--space-10adjusted).js-readyclass detection for progressive enhancementAdded screenshot capture tooling: New
scripts/capture-screenshots.mjsfor visual regression testing across multiple viewports and sectionsUpdated package.json: Added screenshot capture npm scripts
Implementation Details
The new system relies on:
js-readyclass added to<html>to enable transitions only when JavaScript is readythreshold: 0.12androotMargin: '0px 0px -8% 0px'for reveal timingtransition-delaycalculated from--stagger-index(max 4) × 70ms for cascading revealsThis approach reduces bundle size, improves maintainability, and provides better performance by leveraging native browser animations.
https://claude.ai/code/session_014BQEj343rKYdVUCEGhdPBN