Horizontal Scroll Gallery

Широкий storytelling-блок для кейсов, этапов, постеров и хроники проекта.

Framer MotionRange control

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

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

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

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

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

React component

Horizontal Scroll Gallery

'use client';

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

export function HorizontalScrollGallery() {
  const [progress, setProgress] = useState(0);

  return (
    <div>
      <motion.div animate={{ x: `${-progress}%` }} className="flex w-[220%] gap-4">
        <div className="h-48 w-48 bg-neutral-900" />
        <div className="h-48 w-48 bg-neutral-900" />
      </motion.div>
      <input type="range" min={0} max={100} value={progress} onChange={(event) => setProgress(Number(event.target.value))} />
    </div>
  );
}