Modules/ PricingFree

GSAP Draggable Pricing Comparison

Interactive draggable comparison slider built with GSAP Draggable. Drag to compare features between plans with smooth snap points, animated labels, and real-time price updates.

Install

npm install gsap

Usage guide

## Usage Guide\n\n### Dragging\nGrab the comparison table and drag left/right. It snaps to the nearest plan. Click plan name buttons to jump directly.\n\n### Custom Features\nEdit `FEATURE_LABELS` to add or rename feature rows. Each feature supports string, number, or boolean values.\n\n### Responsive\nThe slider width is `PLANS.length * 340px`. Adjust the 340px multiplier for wider/narrower cards.\n\n### Dot Colors\nThe `color` prop on each plan controls the name color and highlight styling throughout the comparison.