Beartx
KPCKevin Powell - Community
•Created by Beartx on 11/5/2023 in #front-end
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> </> ) }
}, []); 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> </> ) }
1 replies