I’m trying to implement smooth scrolling action using GSAP in react. Note that this is different from usual smooth scrolling. An example of what I’m trying to replicate can be seen in this website:
This is my attempt:
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 (
<section className="viewport">
<div id="scroll-container" className="scroll-container">
<div className="content">
<div className="img-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-10.jpg" alt="" />
</div>
<div className="img-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-14.jpg" alt="" />
</div>
<div className="img-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-15.jpg" alt="" />
</div>
<div className="img-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-16.jpg" alt="" />
</div>
{/* Repeat the images section as needed */}
</div>
</div>
</section>
);
};
export default Scroller;
However, this is not working. There is no error whatsoever, but there is no difference in the scrolling action either.
Please help me out, thanks in advance!
