Add continuous horizontal auto-scrolling animation to testimonial/project cards

[stuticoder123]

Currently, the cards in the section are displayed in a single horizontal line with navigation arrows for scrolling. This requires the user to manually click on arrows to view the next set of cards. I want to improve the user experience by adding a smooth auto-scrolling effect : The cards should continuously scroll horizontally from left to right. If the user hovers the mouse over a card, the scrolling should pause, allowing them to read the content. Once the cursor is moved away from the card, the scrolling should resume automatically. The scrolling should be smooth and seamless to provide a professional, engaging look.

Expected Behavior :-
Cards move automatically in a left-to-right horizontal scrolling motion.
On hover over a specific card, the scrolling animation stops temporarily.
On mouse leave, the animation resumes from where it paused.

Steps to Reproduce (Current Behavior) :-
Go to the section where cards are displayed.
Notice that cards can only be moved using the arrow button.
There is no auto-scrolling or hover-to-pause effect.

Possible Fix / Implementation Suggestions :-
Use CSS animations or Framer Motion for smooth horizontal scrolling.
Add an event listener for onMouseEnter to pause the animation.
Add an event listener for onMouseLeave to resume the animation.

[ZarrarPeshimam]

@stuticoder123, I would like to work on this issue

[haleema-khatun]

can you assign me this issue, i would like to work on it

[stuticoder123]

I want both of you to tell me the detailed approach and whosoever will be clear and correct in their approach ....the project will be assigned to them .... @ZarrarPeshimam @haleema-khatun

[haleema-khatun]

sure @stuticoder123

[haleema-khatun]

hello @stuticoder123

so I'll be working on is improving the user experience by making the cards in this section auto-scroll smoothly from left to right kind of like a carousel that moves on its own. The idea is to have a continuous, seamless loop so the content just keeps flowing without needing to click anything.

Now, to make it interactive, the scroll will automatically stop when one hovers over a card to allow them some time to read or interact with it, then start again as soon as they move their mouse away. I’ll be structuring everything with HTML, using CSS animations to get that smooth movement (or Framer Motion if it's in React), and then tying it all together with a bit of JavaScript to handle the pause and resume on hover. The goal here is to create a hands-free, smooth-scrolling experience that still feels responsive and easy to interact with.

[bhumikamutta]

@stuticoder123, I would like to work on this issue

[haleema-khatun]

@stuticoder123 can i work on this issue ??