Folding Panels Slider

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

Framer Motion3D rotation

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

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

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

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

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

React component

Folding Panels Slider

'use client';

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

export function FoldingPanelsSlider() {
  const [active, setActive] = useState(0);

  return [0, 1, 2].map((panel) => (
    <motion.button key={panel} onClick={() => setActive(panel)} animate={{ rotateY: active === panel ? 0 : 48 }}>
      Panel {panel + 1}
    </motion.button>
  ));
}