Swipe Stack Slider

Подходит для кейсов, poster-hero блоков и компактных презентаций, где важен жест и кинематографичный переход.

Framer MotionAnimatePresence

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

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

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

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

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

React component

Swipe Stack Slider

'use client';

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

const slides = ['Atlas', 'Signal', 'Prism', 'Nova'];

export function SwipeStackSlider() {
  const [index, setIndex] = useState(0);

  return (
    <div>
      <AnimatePresence mode="popLayout">
        <motion.div key={slides[index]} initial={{ x: 120, opacity: 0 }} animate={{ x: 0, opacity: 1 }} exit={{ x: -120, opacity: 0 }}>
          {slides[index]}
        </motion.div>
      </AnimatePresence>
      <button onClick={() => setIndex((value) => (value + 1) % slides.length)}>Next</button>
    </div>
  );
}