Architecture is fundamentally about space. Buildings are inhabited three-dimensionally — through circulation, scale, light, and material. A website is locked to a flat screen. Motion is the bridge between these two realities.
Yet motion on architecture websites is often an afterthought — a library dropped in because it is available, not because it serves the work.
From Static to Spatial
- 01
Static Content
A photograph communicates form and material, but not the act of moving through space.
- 02
Reveal
Content appears with intention — not all at once, but in sequence.
- 03
Transition
Moving from one section to another mirrors moving from one room to the next.
- 04
Movement
Subtle animation creates depth, layers receding as in perspective.
- 05
Sequence
Multiple elements animate in relationship — a choreographed progression.
- 06
Perception
The visitor begins to feel spatial relationships, not just read about them.
- 07
Experience
The architecture is communicated through the body of the experience.
The Hierarchy of Attention
Not every element deserves animation. Motion has a hierarchy — it should guide attention, not compete with the architecture.
Motion Hierarchy — What Should Animate and Why
The Spatial Sequence
A Project's Spatial Journey
- 01
Project Introduction
The threshold — a moment of stillness before entry.
- 02
Hero
The establishing shot. Wide. Clear. No competition for attention.
- 03
Statement
The project's thesis. Text enters after the space has been felt.
- 04
Large Image
Full immersion — a wide interior or exterior establishing scale.
- 05
Material Detail
A closer look — texture, craft, the human hand.
- 06
Technical Information
Precision. Structure. The logic behind the form.
- 07
Related Project
A gentle handoff, maintaining the narrative thread forward.
Tools for Spatial Motion
GSAP ScrollTrigger, clip-path, scale, and fade are not magic wands. They are tools for architectural communication — used when they serve the spatial narrative.
- Reveal animations — the image grows from its final position, not from nothingFade/transform — elements enter with purpose, not defaultScale — elements expand from their origin pointClip-path — reveals content as if curtains partingParallax — layers move at different rates, creating depthScroll-driven animation — the visitor's scroll becomes the narrative pace
Motion should guide attention, not compete with the architecture.
This is not a constraint — it is a principle of design. Good architecture does not call attention to its structure; it makes the experience seamless. Motion should do the same. It reveals, it guides, it clarifies. It does not announce itself.