It’s not every day a new car model is debuted, so when the X2 was revealed, BMW wanted to make a splash. Given the typically limited assets available for vehicle launches, the challenge was seeing how far I could stretch what was available – in this case, a single 360º video of the car.
Working closely with the front-end team to break free of the existing template, utilizing AfterEffects for some stop-motion style tricks, and contributing some CSS animation of my own, we launched a unique page on short notice.
OVERVIEW
With high-resolution on my side, I mocked up how a sequence of vignettes would become the background of the browser viewport.
Scrolling down the page would advance the animation frame-by-frame, settling intermittently to show copy highlighting car's features.
I created this animation using only CSS + an SVG, so that it could be re-used in multiple contexts while remaining a lightweight implementation.