Skip to content
All work
LiveMotion Design

Ironform

A strength gym that hits in layered cut-outs and chalk.

Role
Motion & UI design
Date
Nov 2026
Tags
Fitness, Layered parallax, GSAP
Visit live site (opens in a new tab)
Ironform hero: an athlete swinging a kettlebell in front of the headline Forge Your Strongest Self

The idea

A strength gym told like a poster in motion: real photos, cut out and layered at different depths, with the athlete standing in front of the headline.

The process

One athlete photo and six product shots were retouched and cut out, plus a real chalk-dust sprite lifted from the photo. Each section has its own ScrollTrigger timeline, and demo flows for joining, booking a tour and reading a program run entirely on the page.

Motion techniques

  • Layered cut-outs with depth-based pointer parallax
  • Headline set between the background and the athlete
  • Chalk-dust bursts from a real sprite
  • One ScrollTrigger timeline per section
  • Transform and opacity only; blur is static

The outcome

Loud but disciplined. An accessible modal system handles focus trap and focus return, and every confirmation says plainly that nothing leaves the page.

Pick your weapon: strength, HIIT and cardio program cards with a dumbbell, kettlebell and sneaker
Programs: each card's object floats at its own depth.
12 weeks, new numbers: the athlete beside results statistics
Results: numbers count up as the section pins.