Scroll dial
Scroll, and the titles swing round the dial while the picture dissolves into the next.
Scroll down. The dial can be changed below: 45° is airy, 20° is dense. Click a faded title to jump to it.
Custom animation / motion design
Custom animation, motion, and interactive elements that set the site apart from a template look.
from HUF 60,000
A picture, and beside it the title that goes with it. The other titles wait on the dial, tilted and faded, and as you scroll the next one swings down into place while the picture melts into the new one.
- GSAP ScrollTrigger
- Scroll-linked
- CSS transforms
How it works
The titles sit on the spokes of a dial: the active one is level, and its neighbours are turned away by multiples of the step angle and fade out. The turning is tied to the scroll (GSAP ScrollTrigger), so the dial turns exactly as far as the visitor scrolled, and works the same way backwards. The section is one long pinned block in which the picture and the dial stay put while the page runs underneath.\n\nEvery element is only a transform and an opacity, so the browser draws it on the graphics card and scrolling never stutters. When scrolling stops, the dial settles gently on the nearest title, so there is always a clean picture. You can change the step angle (45°, 30°, 20°) below: at a smaller angle more titles are in view at once. For visitors who ask for reduced motion there is no turning: the same content as a plain list.
Want something like this on your own site?
Motion and WebGL are part of what I do. We'll work out what fits your site while keeping it fast.
Get an estimate
Content editorChange your site's content without coding, and see the result at once.