Search
Star
Feedback
Setup for Free
© 2026 Hedgehog Software, LLC
Twitter
GitHub
Discord
System
Light
Dark
More
Communities
Docs
About
Terms
Privacy
infinite horizontal scroll animation in react - Kevin Powell - Community
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
(
"
.scroller
inner
"
)
;
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
=
"scroller
inner 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
>
<
/
>
)
}
Kevin Powell - Community
Join
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263
Members
View on Discord
Resources
ModelContextProtocol
ModelContextProtocol
MCP Server
Was this page helpful?
Yes
No
Similar Threads
Similar Threads
Jittering infinite horizontal scroll animation tailwindcss
KP-C
Kevin Powell - Community / front-end
2y ago
Create an infinite horizontal scroll animation
KP-C
Kevin Powell - Community / front-end
2y ago
Horizontal scroll animation
KP-C
Kevin Powell - Community / front-end
4y ago
Infinite horizontal scroll menu
KP-C
Kevin Powell - Community / front-end
2y ago