Drag Slider

Слайдер-лента, который ощущается тактильно и одинаково хорошо работает мышью и пальцем.

GSAP DraggablePointer UX

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

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

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

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

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

React component

Drag Slider

'use client';

import gsap from 'gsap';
import { Draggable } from 'gsap/Draggable';
import { useEffect, useRef } from 'react';

gsap.registerPlugin(Draggable);

export function DragSlider() {
  const frameRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!frameRef.current || !trackRef.current) return;

    const maxX = Math.min(0, frameRef.current.offsetWidth - trackRef.current.scrollWidth);
    const draggable = Draggable.create(trackRef.current, {
      type: 'x',
      bounds: { minX: maxX, maxX: 0 },
      inertia: false,
    })[0];

    return () => draggable.kill();
  }, []);

  return (
    <div ref={frameRef} className="overflow-hidden rounded-[28px] border border-white/10">
      <div ref={trackRef} className="flex gap-4 p-4">
        <div className="h-64 w-72 shrink-0 rounded-[20px] bg-neutral-900" />
        <div className="h-64 w-72 shrink-0 rounded-[20px] bg-neutral-900" />
        <div className="h-64 w-72 shrink-0 rounded-[20px] bg-neutral-900" />
      </div>
    </div>
  );
}