Loading...
Installation
Usage
import FAQScrollAccordion from "@/components/ruixen/faq-scroll-accordion";
const faqData = [
{
id: 1,
question: "What is Next.js?",
answer:
"Next.js is a React framework for building fast and scalable web applications.",
icon: "🚀",
iconPosition: "left",
},
{
id: 2,
question: "Does it support TypeScript?",
answer: "Yes, Next.js has built-in support for TypeScript.",
icon: "📝",
iconPosition: "right",
},
];
export default function MyFAQ() {
return <FAQScrollAccordion data={faqData} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | FAQItem[] | defaultData | Array of FAQ items to display |
className | string | - | Additional CSS classes for the container |
questionClassName | string | - | Additional CSS classes for question styling |
answerClassName | string | - | Additional CSS classes for answer styling |
FAQ Item Structure
Each FAQ item should have the following structure:
interface FAQItem {
id: number; // Unique identifier for the FAQ item
question: string; // The question text
answer: string; // The answer text
icon?: string; // Optional icon (emoji or text)
iconPosition?: "left" | "right"; // Position of the icon
}Features
- Scroll-Triggered Animation: Uses GSAP ScrollTrigger to automatically expand items as you scroll
- Smooth Animations: Powered by Framer Motion for smooth expand/collapse transitions
- Interactive: Click to manually expand/collapse items
- Customizable Icons: Add optional icons with left or right positioning
- Responsive Design: Adapts to different screen sizes
- Accessible: Built on Radix UI Accordion for proper accessibility
- Dark Mode: Supports both light and dark themes
Examples
Basic Usage
<FAQScrollAccordion />With Custom Data
const customFAQ = [
{
id: 1,
question: "How does scroll triggering work?",
answer:
"The component uses GSAP ScrollTrigger to automatically expand FAQ items as you scroll through the page.",
icon: "⚡",
iconPosition: "left",
},
{
id: 2,
question: "Can I customize the styling?",
answer:
"Yes, you can use the className props to customize the appearance of questions and answers.",
icon: "🎨",
iconPosition: "right",
},
];
<FAQScrollAccordion data={customFAQ} />;With Custom Styling
<FAQScrollAccordion
data={faqData}
className="bg-gradient-to-b from-blue-50 to-white"
questionClassName="bg-blue-100 hover:bg-blue-200"
answerClassName="bg-green-400 text-white"
/>Without Icons
const simpleData = [
{
id: 1,
question: "Simple question without icon",
answer: "This FAQ item doesn't have an icon.",
},
];
<FAQScrollAccordion data={simpleData} />;Animation Details
The component creates a scroll-triggered timeline that:
- Pins the container during scroll
- Auto-expands items sequentially as you scroll
- Smooth transitions using Framer Motion
- Manual interaction remains available at any time
The scroll trigger is configured with:
scrub: 0.3for smooth scroll-linked animation- Dynamic end point based on number of FAQ items
- Automatic cleanup on component unmount
Dependencies
framer-motion- For smooth animations@radix-ui/react-accordion- For accessible accordion functionalitylucide-react- For plus/minus iconsgsap- For scroll-triggered animations@gsap/react- React integration for GSAP