KP-C

Kevin Powell - Community•3y ago

Beartx

infinite horizontal scroll animation in react

I have watched the tutorial in html and am trying to use this in react: https://codepen.io/kevinpowell/pen/BavVLra, however am not able to animated, Any help, this is my current implementation:

import { useRef, useEffect } from "react";
export default function LogoCarousel() {
const scrollers = useRef([]);
useEffect(() => {
addPreMotionAnimation();
}, []);
function addPreMotionAnimation() {
if(!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
addAnimation();
}
}
function addAnimation() {
scrollers.current.forEach(scroller => {
scroller.current.setAttribute("data-animated", true);
const inner = scroller.current.querySelector(".scrollerinner");
const items = Array.from(inner.children);
items.forEach(item => {
const clone = item.cloneNode(true);
clone.setAttribute("aria-hidden", true);
inner.appendChild(clone);
});
});
}
return (
<>
<div
ref={el => scrollers.current.push(el)}
className="scroller max-w-600"
data-direction="right"
data-speed="slow"
>
<div className="scrollerinner flex flex-wrap gap-1">
<img src="https://i.pravatar.cc/150?img=1" alt="" />
<img src="https://i.pravatar.cc/150?img=2" alt="" />
<img src="https://i.pravatar.cc/150?img=3" alt="" />
<img src="https://i.pravatar.cc/150?img=4" alt="" />
<img src="https://i.pravatar.cc/150?img=5" alt="" />
<img src="https://i.pravatar.cc/150?img=6" alt="" />
</div>
</div>
<div
ref={el => scrollers.current.push(el)}
className="scroller max-w-600"
>
<ul className="scroller__inner flex flex-wrap gap-1">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>SSG</li>
<li>webdev</li>
<li>animation</li>
<li>UI/UX</li>
</ul>
</div>
</>
)
}