Animated Web Pages Skill

Create distinctive kinetic web experiences combining Swiss design principles with GIS data visualization.

Core Libraries

Always include GSAP with ScrollTrigger:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

Design System

Color Palette

:root {
    --swiss-red: #E63946;
    --swiss-black: #1A1A1A;
    --swiss-white: #F2F2F2;
}

Typography

• Primary: Helvetica Neue, Helvetica, Arial
• Monospace: Courier New (HUD/data elements)
• Headlines: 900 weight, letter-spacing: -0.03em, uppercase, size: 10-18vw
• Body: 500 weight, letter-spacing: 0.5-2px, uppercase, max-width: 300px

Geometry

• Shapes: rectangles, circles, triangles (data nodes)
• Grid: 50-100px squares, opacity 0.2-0.3
• Perspective: rotateX(60-70deg) for depth

Animation Patterns

1. Calder Mobile (Floating Idle)

gsap.to(".node", {
    y: "random(-20, 20)", x: "random(-15, 15)", rotation: "random(-8, 8)",
    duration: gsap.utils.random(2, 4), repeat: -1, yoyo: true,
    ease: "sine.inOut", stagger: 0.15
});

2. Scroll Snap to Grid

gsap.to(".node", {
    scrollTrigger: { trigger: "body", scrub: 1.5 },
    x: (i) => (i % 3) * 100 - 100,
    y: (i) => Math.floor(i / 3) * 100 - 100,
    rotation: 0
});

3. Perspective Grid Flatten

gsap.to(".map-grid", {
    scrollTrigger: { scrub: true },
    rotationX: 0, scale: 0.5, opacity: 0.6
});

4. Section Reveals

gsap.timeline({ scrollTrigger: { trigger: section, start: "top 70%", scrub: 1 }})
    .from("h1", { opacity: 0, x: -50 })
    .from("p", { opacity: 0 }, "-=0.5");

Page Structure

body
├── .hud (fixed, z:100) - coords, status, phase, progress bar
├── .canvas (fixed, centered, perspective: 1000-1200px)
│   ├── .map-grid (perspective background)
│   └── .node-cluster (floating elements)
└── section* (relative, z:10-20, pointer-events:none)
    ├── h1 (massive)
    └── p (small, uppercase)

HUD Pattern

.hud { position:fixed; font-family:monospace; font-size:10px; 
       color:var(--swiss-red); text-transform:uppercase; letter-spacing:2px; }

Best Practices

1. Chaos → Order - Visual metaphor for disaster response narrative
2. 4-section minimum - DETECT → ASSESS → MOBILIZE → RESPOND
3. Animated stats - Counter animations on scroll-enter
4. Progress visible - Top bar or phase dots
5. pointer-events:none on sections - Allow canvas interaction
6. Color shift - Dark → light as story progresses