Following successful collaboration with Athlon on previous projects, I was engaged to incorporate motion interactions into their new website to elevate user experience and add a unique touch to their brand. Live website can be seen here.
Website won site of the day also on
CSSDA. Below is a partial selection of what I did:
Navigation - On scroll logo and nav btns scroll out of view with a staggered fade. Menu burger remains fixed but on nav elements out, menu is highlighted in white.
Body choreography - Reel autoplay. Inertia scroll with staggered elements entering page. When scroll reaches "selected work" area, background highlights to white to make work pop out. (Reverts to black BG after "selected work" area end).
Menu system - White split transition bg takeover with staggered masked menu list into view. Menu list items elevate to red on hover.
Brand grid - Perspective shuffle transitions.
Contact - Progressive wipe upwards. I would imagine on "back press" transition motions will invert.
Carousel - Fixed nav arrow with staggered card movement.
Mix - Partial mix of interactions that didn't make the cut.