одно изображение animate translateX реагирует на это и повторяется

Question

как оживить translateX реагируют наивно и в конечном итоге, как на этом изображении

Answer 1

Вы можете сделать это с помощью реквизита CSS и Styled-Components

background-image: url(...);
background-repeat-y: no-repeat;
background-position-x: ${props => props.positionPercentage};