Vertical Loop Slider

Подходит для цитат, тарифов, новостей и коротких карточек с непрерывным вертикальным циклом.

Framer MotionLoop animation

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

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

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

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

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

React component

Vertical Loop Slider

'use client';

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

const rows = ['One', 'Two', 'Three', 'Four'];

export function VerticalLoopSlider() {
  const [offset, setOffset] = useState(0);

  useEffect(() => {
    const timer = window.setInterval(() => setOffset((value) => value + 1), 1400);
    return () => window.clearInterval(timer);
  }, []);

  return <motion.div animate={{ y: -(offset % rows.length) * 72 }}>{rows.concat(rows).join(' ')}</motion.div>;
}