HTML5 Animated Banner

One headline, five products — rebuilt for every placement size in the set.
The briefA back-to-school retail push for Amazon built on one line — “Low prices, more ___.” — where the last word and the product both change, across Amazon's own on-site placement sizes.
The buildA five-frame GSAP sequence built five times over — 775x200, 476x850, 336x280, 140x600 and 320x135 — each layout redrawn for its own shape, with a backup JPG per size.

Amazon

Animated display set for the Amazon back-to-school campaign. The headline holds while its last word and the product behind it swap — backpacks, notebooks, snacks, electronics, shoes — resolving on the “Shop Now” end frame with the Amazon wordmark.
  • Rotating Word + Product
    Five paired copy and product layers cross-dissolve on a staggered GSAP timeline, then hold on the end frame.
  • Amazon Placement Sizes
    775x200, 476x850, 336x280, 140x600 and 320x135 — non-IAB shapes, so every layout is redrawn rather than scaled.
  • Rollover CTA State
    The “Shop Now” button carries a second state that swaps in on hover.
  • Backup JPG Per Size
    A static fallback exported for each of the five sizes, matching the end frame.
  • Platform Ready
    ad.size meta plus clickTag on every size; GSAP served from the 2mdn CDN so it stays out of the initial payload.

336x280 Animated Banner

  • Description: Back-to-school display set for Amazon — one rotating-word animation model, rebuilt across five Amazon on-site placement sizes.
  • Tools used:
    Tools used

Every size, live — not screenshots

775 × 200
476 × 850
140 × 600
320 × 135