Accordion Reveal

Практичный паттерн для FAQ, описаний пакетов, этапов работ и модульных блоков.

Framer MotionLayout animation

Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать нам Работать с нами

Назад в библиотеку

Загрузка сцены

React component

Accordion Reveal

'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { useState } from 'react';

export function AccordionReveal() {
  const [open, setOpen] = useState(0);

  return [0, 1, 2].map((item) => (
    <button key={item} onClick={() => setOpen(item)}>
      <AnimatePresence>{open === item ? <motion.div initial={{ height: 0 }} animate={{ height: 'auto' }}>Content</motion.div> : null}</AnimatePresence>
    </button>
  ));
}