How viktorbalko/tagheuer-scrolling works
Purpose and Entry Point
This is a static promotional scrolling experience for Tag Heuer. The browser entry point is index.html, which loads page structure, styling, imagery, and client-side animation behavior.
Presentation Layer
The document layout and visual sections are defined in index.html. Site-wide visual treatment, responsive layout, typography rules, and positioning for scroll scenes are centralized in css/styles.css.
Key paths:
• index.html
• css/styles.css
Scroll and Animation Control
Interactive behavior is implemented in js/app.js. It is the primary control boundary between static markup/CSS and runtime animation: it likely selects page elements, observes scroll position, and coordinates animation timelines.
Key path:
• js/app.js
Animation Runtime
GSAP is vendored under libs/gsap and is the material animation dependency. The application script should use this local runtime rather than a backend API or package-managed dependency. The repository has no indicated server, build pipeline, or database layer.
Key paths:
• libs/gsap
• js/app.js
Asset Composition Flow
The page composes visual scenes from static assets in images, organized by likely placement or animation role: hero content and left/right scene assets. Browser loading flows from index.html references to these image files, while CSS and JavaScript place or animate them.
Key paths:
• images/hero
• images/left
• images/right
Runtime and Deployment Boundary
The project runs entirely in a web browser as static HTML, CSS, JavaScript, fonts, images, and local libraries. It can be served by any static-file host; no external service integrations, API boundaries, authentication, or persistent data stores are represented.
Key paths:
• index.html
• fonts
• css/styles.css
Main entry points: index.html Page Entry · app.js Animation Controller · styles.css Visual Styles · hero Hero Images
Components 12
Page Runtime
Browser-side promotional experience.
- Browser · Executes the static experience.
- Page Entry · Defines document structure and asset references.
index.html - Scroll Scenes · Promotional layout targets for styling and animation.
index.html - Visual Styles · Centralizes responsive layout, typography, and scene positioning.
css/styles.css - Animation Controller · Coordinates element selection, scroll state, and timelines.
js/app.js - Scroll Input
- GSAP Runtime · Local animation runtime used by the controller.
libs/gsap
Static Assets
Visual and typography resources loaded by the page.
- Hero Images
images/hero - Left Scene Images
images/left - Right Scene Images
images/right - Fonts
fonts
Other components
- Static File Host · Serves repository files without backend services.
Connections 16
- Static File Host → Browser: serves static files
- Browser → Page Entry: loads
- Page Entry → Scroll Scenes: defines
- Page Entry → Visual Styles: loads
- Page Entry → Animation Controller: loads
- Page Entry → Hero Images: references
- Page Entry → Left Scene Images: references
- Page Entry → Right Scene Images: references
- Visual Styles → Fonts: uses
- Visual Styles → Scroll Scenes: lays out
- Animation Controller → GSAP Runtime: uses
- Scroll Input → Animation Controller: drives
- Animation Controller → Scroll Scenes: animates
- Animation Controller → Hero Images: animates
- Animation Controller → Left Scene Images: animates
- Animation Controller → Right Scene Images: animates