SSR · hydrate · scroll · split · stagger · appear

Story

Rendered by Server.renderDocument on .NET and hydrated strictly in the browser. Scroll timelines write their progress into signals, the headline is split into letters, and the gallery staggers out from its centre.

Rendered on .NET · hydrated in the browser

Motion, owned by the view.

Scroll down. Each section below runs an anime.js timeline scrubbed by the scroll, and writes how far it has come into a signal.

01

Owned

Every animation is created when its element is placed and reverted when its owner is disposed. Nothing outlives the view that started it.

02

Reactive

Signals drive animations, and animations publish their progress back as signals, so the rail at the top is text bound to those signals.

03

Portable

This page was rendered by the .NET server. The motion parts add no markup, so the browser adopts every node and animates from there.

Four more, created on the client

Built with Ranvier and anime.js.