Jeep Compass

Interactive showcase for the Jeep Compass launch. A 4-slide Swiper carousel with animated hotspot callouts per slide, plus device shake to trigger a reveal transition via DeviceMotion API.

html5
css3
javascript
gsap

Format: Page Grabber
Platform: Desktop + Mobile + Tablet
Engine: Swiper + Shake.js
Agency: Undertone

How It Works

~2s

Launch

Page Grabber expands. Header animates in with Jeep logo, Compass badge, and tab navigation bar. Slide 1 loads with feature hotspots hidden.

Interactive

Explore

Swiper carousel enables touch-swipe between 4 vehicle views. Each slide reveals 3 animated hotspot callouts: background tints, spec text, and detail imagery.

Event-driven

Shake

On mobile, shaking the device (acceleration > 15 threshold) triggers a custom event that advances or reveals the next feature set.

End State

CTA

Tab navigation lets users jump directly to any slide. Final slide includes build-and-price CTA tracked through the ad platform.

Engineering

Device Shake Detection
Shake.js listens to DeviceMotion events and calculates velocity from accelerometer delta. When velocity exceeds threshold (15), a custom 'shake' event fires. 1000ms debounce prevents rapid re-triggering.
Swiper Carousel
4-slide touch carousel with hardware-accelerated CSS transforms. Each slide has independent hotspot elements that animate in sequence after the slide transition completes.
Adaptive Navigation
Desktop renders a tabbed nav bar with 4 clickable regions. Tablet gets a resized variant with separate asset files. Mobile relies on swipe gestures and shake interaction.
3
hotspots per slide
Per-Slide Hotspots
Each slide contains 3 feature callout boxes (slideBox1, slideBox2, slideBox3) with independent background tints and text overlays. GreenSock staggers their entrance after slide transition.