How to make an infinitely scrolling background using Framer Motion in NextJS?

So I have a background sprite like this: https://i.stack.imgur.com/BFZ2e.png

And I am trying to make it scroll infinitely on the X axis, from right to left using Framer Motion. I tried a few things, but nothing seemed to work. This is the closest i've got to perfection:

<motion.div 
  initial={{x: 0}}
  animate={{x: -1397}}
  transition={{x: {repeat: Infinity, repeatType: "loop", duration: 8, ease: "linear"}}} 
  className="w-full h-[274px] z-30 bg-[url('/images/hills-1.png')] bg-repeat-x absolute left-0 bottom-0"
>
</motion.div>

The background infinitely generates as it's scrolling, not out of view but in the middle, which obviously doesn't look good (see pic below)

https://i.stack.imgur.com/TchQs.png

So how can I do it properly? I tried searching on google but nothing useful showed up. If it can be done using another CSS library or something other than Framer Motion, it's fine. But I would prefer a solution using Framer Motion.