How to solve the problem with the scrolling of an animated element?

Question

css

Colleagues, hello everyone!
Help, please, to understand this problem, there is an element with animation, which will be applied only in the mobile version. When clicking / hovering on this element, the animation should stop, there are generally no problems with this, but besides this, it is necessary that the user be able to manually scroll this block, but the scroll only works to the right, when trying to scroll to the left from the extreme right position, it does not scroll works.

I tried to implement animation in js, but the problem remains. I would be extremely grateful for any hint.

link to codepen