It seems like you have implemented an auto-animation using CSS along with a "wheel event" to control it.
Here are some suggestions that you can consider:
- Try approaching it the "React way": Instead of manually adding an event listener, handle the state programmatically.
- You could toggle a class to start or stop the auto-scroll animation.
- If you require more precise control, utilizing a library such as Framer Motion might be beneficial.
Below is an example showcasing how you could implement these suggestions:
const Banner = ({ images }) => {
const [isAutoScroll, setIsAutoScroll] = useState(true);
const onHoverHandler = () => setIsAutoScroll(false);
const onBlurHandler = () => setIsAutoScroll(true);
return (
<div
className="container"
onMouseEnter={onHoverHandler}
onMouseLeave={onBlurHandler}
>
<div className={`scrolleable ${isAutoScroll ? "play" : "pause"}`}>
{images.length > 0 &&
images.map((img) => {
return <ImageBanner key={img}> {img} </ImageBanner>;
})}
</div>
</div>
);
};
For styling in CSS:
.scrolleable {
display: flex;
position: relative;
animation-name: marquee;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.play {
animation-play-state: running;
}
.pause {
animation-play-state: paused;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
Remember to customize this approach according to your specific requirements or technology stack.
Alternatively, you can explore handling the position of the marquee element programmatically without relying solely on CSS by adjusting the property scrollLeft. This method may involve managing the positioning at various touchpoints and ensuring proper cleanup functions to prevent memory leaks. Your component would need to handle incrementing or decrementing the position based on scrolling behaviors and mouse interactions.