Ellie MD
8 animations · homepage

ELLIE Stack · Motion

Every animation in the homepage sections, playable and copy-ready.

A living reference for the motion vocabulary shipped in Explore by program and Shop programs. Watch each animation, hit Replay, then Show code to copy the exact keyframes, transitions, and component logic devs need.

Keyframe1Transition4Stateful / JS2Principle1

Your system reports prefers-reduced-motion: no-preference.

Transitioncard-hover-system

Card hover: lift + zoom + scrim + arrow

Four effects fire on one hover: the card lifts to scale 1.02 (150ms), the photo zooms to 1.05 and a black/10 scrim fades in (300ms), and the arrow darkens on direct hover (300ms). The card carries will-change-transform so the lift animates an existing compositor layer - putting it on the imgs blurs transform-zoomed photos.

Hover me

lift + zoom + scrim + arrow

In the homepage:Every program card in the Explore grid - desktop bento, tablet bento, and the stacked tablet/mobile column.

Photos that carry an inline transform for art direction override the class hover-zoom (inline style wins for transform).

Stateful / JScategory-cross-fade

Category tab cross-fade

Clicking a filter pill fades the whole product row to opacity 0 (300ms), swaps the content while invisible, and fades back in (300ms). The setTimeout matches the CSS duration exactly.

MHT PROGRAM

Hormones

In the homepage:Shop programs carousel - switching between the category filter pills.
Stateful / JSsmooth-scroll-snap

Smooth scroll-snap track

Arrows and thumbnail jumps scroll the track with browser-native smooth scrolling to the card’s own offset; snap-x snap-mandatory keeps free swipes landing cleanly on a card. No author duration - the browser owns the glide.

Estradiol

Semaglutide

Tretinoin

Sermorelin

In the homepage:The Shop carousel track: prev/next arrows, thumbnail jumps, and user swipes.
Transitionprogress-fill

Rail / overlay progress fill

The teal fill animates width and margin-left together (300ms) as the active card index moves, so the bar both grows and slides to mirror the visible window.

01-02 / 05
In the homepage:The tablet spread-rail control bar and the mobile overlay nav’s thin progress line.
Transitionthumbnail-lift

Thumbnail selection lift

The active thumb scales to 110 with full opacity, a teal ring, and a shadow; inactive thumbs sit dimmed at opacity 40 and brighten to 70 on hover. All of it on one transition-all at 200ms.

In the homepage:The mobile thumbs carousel nav - tap any product to jump to it.
Keyframeswipe-hint

Swipe-hint wave + dot breathe

Three chevrons pulse opacity 0.1 → 0.55 in a staggered wave while the dot breathes between opacity 0.3/0.65 and scale 1/1.3 - both on a 1.5s ease-in-out infinite loop.

In the homepage:The mobile swipe carousel nav - a faint "swipe to see more" hint over the product image.

The only motion with a prefers-reduced-motion guard: both freeze at opacity 0.4 when the user prefers reduced motion.

Transitioncta-hover-colors

CTA + pill hover colors

Color-only hovers at the Tailwind default 150ms: the filled CTA deepens its teal, the outline CTA solidifies from white/40 to white, and filter pills tint. No movement anywhere.

In the homepage:Banner CTAs (all five directions), the shop CATEGORY button, and the carousel filter pills.
Principleglobal-smooth-scroll

Global smooth scrolling

scroll-behavior: smooth on <html> makes every anchor navigation and programmatic scroll glide instead of jump. Browser-native - no author duration or easing.

Jump to the top entry ↑

The whole document scrolls smoothly - this link glides instead of jumping.

In the homepage:The whole document.