Gandy-Draper - animation demo

A scroll-pinned, 4-slide animated landing page inspired by timothyfinancial.com, reskinned with Gandy-Draper content and brand colours.

Built as a quick demo for Elle Draper. Vanilla HTML + CSS + JS, zero dependencies, drops cleanly into Themify, Elementor, or any other WordPress builder via a custom code block.

Preview locally

# from this folder
python3 -m http.server 8765
# then open http://localhost:8765/ in a browser

Stop the server with Ctrl+C. Use a real desktop window (>980px wide) to see the full animation - mobile gets a clean static fallback.

What it does

Slide 1 (hero): logo + headline fades in, three branded circles spring in from the right with a bouncy keyframe.
Scroll once: circles fly across the viewport into a triangular cluster on the left; one circle "pops" larger then settles, its title gets a gold underline; the right side fades in the matching service description.
Slide 2 - 4: Web Design -> SEO -> Social. Each scroll re-shuffles the cluster so a different circle is the featured one.
Scroll progress dot on the right rail tracks position; chevron hint at bottom-left fades after the first interaction.

Files

mockup/
- index.html    structure (4 slides, 3 circles, header, scroll hints)
- style.css     all keyframes, sticky-scroll mechanics, circle positions
- script.js     scroll listener, slide switcher, pop animation
- README.md     this file

How the animation works

Three techniques layered together:

Sticky-scroll runway. #home-slides is 400vh tall; every direct child is position: sticky; top: 0; height: 100vh. As the user scrolls, all four slides plus the three circles stay pinned in the viewport - they don't actually move with the page.
Programmatic snap. A 50ms scroll polling loop detects which "viewport-page" the user is moving toward, locks body scroll, programmatically scrollTo()s the target, runs the slide transition, then unlocks. This produces the discrete, deliberate slide-snap feel.
Choreographed transition. On each slide change: old slide fades out (250ms) -> circles reposition (1s with a 0.5s delay) -> new slide fades in (250ms after a 1s pause) -> active circle pops larger (10ms in, 125ms out) -> its title grows + gold underline animates from 0 to 100% width.

Everything else is plain CSS keyframes and class toggles.

Brand mapping

Original (Timothy Financial)	This demo (Gandy-Draper)
Deep navy `#030048`	Deep navy `#0a1f3d`
Mint accent `#78e6c2`	Gold accent `#caa544`
Indigo circle `#6873f8`	Slate-blue circle
Cream/white circle	Cream `#f5efe2` circle
Albra serif + Acumin Pro sans	Cormorant Garamond + Inter

Colours pulled from gandy-draper.com's own palette. Fonts swapped to free Google Fonts that hit the same "high-end services" register.

Browser support

Tested behaviour:

Chrome / Safari / Firefox latest (desktop)
Mobile / tablet (<=980px) gets a static fallback - circles stack vertically, slides flow in normal page scroll, no snap behaviour.

Embedding in WordPress (Themify or Elementor)

Copy style.css into the theme's custom CSS or a Code block.
Copy script.js into a Code block (or theme footer.php with wp_enqueue_script).
Paste the body of index.html (everything inside <body>) into a Code block in the page editor.
Make sure the Cormorant Garamond + Inter Google Fonts tags are in the page head.

Watermark in the bottom-left corner can be removed by deleting the <a class="watermark"> line in the HTML.