All projects

Test project 28 Jan 2025

pollux - animated historical-dates timeline

pollux - animated historical-dates timeline
  • React 19
  • TypeScript
  • GSAP
  • Zustand
  • Webpack
  • Cloudflare

A time-period selector built around motion. Six eras sit on a ring; clicking a node spins the dial to bring it to the active spot, the two oversized year labels count up to the new range with GSAP, and a Swiper of that era's events fades in. Dot positions come from trig, the active period lives in a Zustand store that both the year counters and the event list read from, and the bundle is webpack + babel-loader gated behind a tsc type-check. React 19, TypeScript, GSAP, Zustand, styled-components, Swiper.

Live Code