Add restrained scroll-reveal animation system#22
Open
tiagov8 wants to merge 1 commit into
Open
Conversation
Single coherent motion vocabulary across the page: - One movement: translateY(16px) -> 0 + opacity 0 -> 1 - One duration: 500ms - One easing: --ease-out (existing token, cubic-bezier(0.16, 1, 0.3, 1)) - One stagger interval: 60ms between siblings (80ms for the 4-step horizontal Approach row) - One trigger: IntersectionObserver, threshold 0.15, rootMargin '0px 0px -8% 0px', unobserve after first reveal Architecture: - CSS gated on html.js so no-JS users see content immediately - Inline <script is:inline> in <head> sets html.js before paint (no FOUC) - prefers-reduced-motion: reduce makes reveals instant - IntersectionObserver also bails out under reduced-motion or when the API is unavailable 44 reveal elements applied: hero copy (staggered 0/80/160/240/320ms for a single fluid hero entrance), stats, every .block-head, all benefit/service/step/why cards, testimonial aside, FAQ items, contact form + aside, CTA banner copy, footer brand + links column. Deliberately untouched: nav (must be present from frame zero), hero-bg photo (already has Ken Burns from PR #20), decorative chrome, inline content links (own hover treatment from PR #17), buttons (own micro-transitions).
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
ssw-website-global | 78a42ce | Commit Preview URL Branch Preview URL |
May 26 2026, 11:39 PM |
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
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.
Summary
Adds a single, restrained scroll-reveal animation system across the homepage. Senior-designer feel: one easing curve, one distance, one duration, one stagger interval, applied consistently. No bounces, no scales, no rotations, no playful flourishes.
The system
translateY(16px) → 0+opacity 0 → 1500msvar(--ease-out)(cubic-bezier(0.16, 1, 0.3, 1))60msbetween siblings (80msfor the 4-step horizontal row)IntersectionObserver,threshold: 0.15,rootMargin: '0px 0px -8% 0px'observer.unobserve()after first revealImplementation
CSS — one ruleset in
src/styles/landing.css:JS bootstrap — a tiny inline
<script is:inline>in<head>addshtml.jsbefore paint so no-FOUC; the existing end-of-body script adds the IntersectionObserver. Without JS or withprefers-reduced-motion: reduceusers get the fully-visible static page.Markup — applied
class="reveal"+style={--reveal-delay: ${i * 60}ms}(per index) to every meaningful unit:44 reveal elements total. None on the nav or the hero background image — those should be there from page paint.
What's deliberately NOT animated
Test plan
/, scroll slowly through each section — every grid reveals as a quiet wave; no juddering, no jumping past the foldprefers-reduced-motion: reduce→ all reveals are instant, full opacityhtml.jsclass never gets added so the.revealrules don't engage)/admin/and edit a benefit description → the live preview re-renders the section; reveal animation should fire once on the re-rendered card🤖 Generated with Claude Code