Реализация плавного действия мыши в React с использованием GSAP ⇐ CSS

[Гость]

Я пытаюсь реализовать плавную прокрутку, используя GSAP в реакции. Обратите внимание, что это отличается от обычной плавной прокрутки. Пример того, что я пытаюсь воспроизвести, можно увидеть на этом сайте:
Это моя попытка:

Код: Выделить всё

import React, { useRef, useEffect, useState } from 'react';
import { TweenLite } from 'gsap';

const Scroller = () => {
const [scroller, setScroller] = useState({
target: null,
ease: 0.05,
endY: 0,
y: 0,
resizeRequest: 1,
scrollRequest: 0,
});

const requestRef = useRef(null);

const onLoad = () => {
updateScroller();
window.focus();
window.addEventListener("resize", onResize);
document.addEventListener("scroll", onScroll);
};

const updateScroller = () => {
const resized = scroller.resizeRequest > 0;

if (resized) {
const height = scroller.target.clientHeight;
document.body.style.height = height + "px";
setScroller(prevState => ({
...prevState,
resizeRequest: 0,
}));
}

const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

setScroller(prevState => ({
...prevState,
endY: scrollY,
y: prevState.y + (scrollY - prevState.y) * prevState.ease,
}));

if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
setScroller(prevState => ({
...prevState,
y: scrollY,
scrollRequest: 0,
}));
}

TweenLite.set(scroller.target, {
y: -scroller.y,
});

requestRef.current = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
};

const onScroll = () => {
setScroller(prevState => ({
...prevState,
scrollRequest: prevState.scrollRequest + 1,
}));

if (!requestRef.current) {
requestRef.current = requestAnimationFrame(updateScroller);
}
};

const onResize = () => {
setScroller(prevState => ({
...prevState,
resizeRequest: prevState.resizeRequest + 1,
}));

if (!requestRef.current) {
requestRef.current = requestAnimationFrame(updateScroller);
}
};

useEffect(() => {
setScroller(prevState => ({
...prevState,
target: document.querySelector("#scroll-container"),
}));
}, []);

useEffect(() => {
if (scroller.target) {
TweenLite.set(scroller.target, {
rotation: 0.01,
force3D: true,
});
}
}, [scroller.target]);

useEffect(() => {
window.addEventListener('load', onLoad);
return () => {
window.removeEventListener('load', onLoad);
window.removeEventListener('resize', onResize);
document.removeEventListener('scroll', onScroll);
cancelAnimationFrame(requestRef.current);
};
}, []);

return (





[img]https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-10.jpg[/img]

[img]https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-14.jpg[/img]

[img]https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-15.jpg[/img]

[img]https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-16.jpg[/img]

{/* Repeat the images section as needed */}




);
};

export default Scroller;

Однако это не работает. Никакой ошибки нет, но и нет никакой разницы в действии прокрутки.
Пожалуйста, помогите мне, заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/781 ... using-gsap