Rotating Hand Animation
What it does
A single ScrollTrigger pins the section over eight viewport heights and scrubs a clock-like rod that spins 1800deg via gsap.set(rotationZ) on each frame; every 360deg cycle swaps the intro headline, at cycle 3 a portrait fades in and the paragraphs stagger in, then the rod stretches to full height, scales up 20x, fades out and reveals the giant brand wordmark.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Rotating Hand Animation — pinned scroll hero with a spinning clock-hand rod
## Goal
Build a full-page scroll-driven hero: the section pins for 8 viewport heights while a thin vertical rod (like a clock hand) spins 5 full turns (1800°) around the center of the screen, driven directly by scroll progress. Each completed 360° cycle swaps the intro headline text. On the 4th cycle a portrait photo fades in inside the rod and two paragraphs slide in. In the final stretch the rod grows to full height, scales up 20×, fades out, and a giant brand wordmark is revealed underneath.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) with the `ScrollTrigger` plugin, plus `lenis` for smooth scrolling. No other libraries.
## Layout / HTML
- `<section class="sticky">` — the pinned hero. Inside it, three absolutely-positioned layers:
- `<div class="hand-container">` containing `<div class="hand">` which contains a single `<img>` (the portrait).
- `<div class="intro">` containing `<h1><span>time to</span> be brave</h1>` followed by two `<p>` elements of placeholder lorem-ipsum copy (2–3 lines each).
- `<div class="website-content">` containing `<h1>harrnish</h1>` (the brand wordmark).
- `<section class="about">` after it — a simple white section with a centered paragraph like "(Your next section goes here)" so there is somewhere to scroll to after the pin releases.
- Module script tag at the end of `<body>`.
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.