Problem with making screen functional while using animation

Priority: Urgent
Request: Problem with making screen functional while using animation
Project ID: 17118
Project Link: https://app.crowdbotics.com/dashboard/app/17118
Staging Link:
Additional Info:
Hi all we have technical difficulty for several days now to create an animation of moving items in the Home shop screen which is showing designer bags. No one from the team knows how to complete this correctly so we need technical help with someone having good expertise working with animations. We are on a deadline so its very urgent.

The animation is done but the scroll capability for end users to go down using separate columns to brows items we can not technically solve probably because of the only solution we managed to implement. We are open to different solutions.

While autoscrolling is happening we need to be able to manually be able to scroll the columns. It doesn’t matter if this means stoping the animation (presently animation doesn’t stop while you scroll by swiping the columns). The issue is that when items go behind the top border of the window they can not be scrolled back since they are being hidden. Scroll up works.

this is the autoscrolling code https://github.com/crowdbotics-apps/cherry-17118/blob/b2ab31915d8890504dfcad94532129cca3d78753/src/components/Home/auto-scrolling.js#L4

this is the home screen where the auto-scrolling is happening https://github.com/crowdbotics-apps/cherry-17118/blob/master/src/components/Home/home.component.js