Skip to content

Coupon State Transitions

Multi-state promotional UI with GSAP-orchestrated animations. Each state transition is carefully choreographed with staggered fades, scale shifts, and content replacement.

Basket LogoBasket
4 codes found!

We search for the best deals so you don't have to.

How it works

The card cycles through three states – intro, applying, and success – with each transition orchestrated by GSAP. Content fades out with a scale-down, new content fades in with staggered timing, and the coupon ticker uses scroll-snap for a native feel.

  • •GSAP Flip plugin – state captures and animated layout transitions between card states, avoiding manual position calculations.
  • •Staggered content replacement – image, title, subtitle, and action area animate independently with 50ms stagger for a cascading effect.
  • •Scroll-snap coupon ticker – codes scroll horizontally with CSS scroll-snap-type: x mandatory, auto-advancing every 750ms.
  • •P3 gradient animation – the background gradient cycles through purple tones with a slow 40-second background-position animation.
  • •Responsive enter/exit – respects prefers-reduced-motion and all animations are self-contained within the demo card.