Modules/ PricingFree

GSAP Staggered Pricing Timeline

Cinematic pricing page with GSAP stagger animations, scroll-triggered feature reveals, and fluid counter animations. Features morph into view with elegant easing and each pricing tier animates sequentially.

Install

npm install gsap framer-motion

Usage guide

## Usage Guide\n\n### Customizing Plans\nEdit the `PLANS` array to set your pricing tiers, features, and CTAs. The `popular` flag highlights a recommended plan.\n\n### Animation Controls\n- Stagger delay per card: `delay: index * 0.2` in the PlanCard ScrollTrigger\n- Title animation: edit the `gsap.from()` in the main useEffect\n- Counter animation duration and easing in the `gsap.to()` call\n\n### Feature Management\nThe `GET` endpoint queries active subscriptions. The `POST` endpoint creates a new subscription record in Supabase.