Framer motion marquee skipping before animation ends

Question

I have this framer motion-built marquee but it seems to skip before the text finishes going all the way through, any thoughts why? It animated fine but skips back to the beginning at the fifth word. Maybe be the values given for the x-coordinate?

    .marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 206px;
  overflow-x: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
}

.track > h1 {
  margin: 20px 0;
  font-size: 8rem;
  font-family: machina;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #f4955c;
  text-transform: uppercase;
}

    import React from 'react'
import { motion } from 'framer-motion'

const marqueeVariants = {
  animate: {
    x: [0, -1400],
    transition: {
      x: {
        repeat: Infinity,
        repeatType: "loop",
        duration: 10,
        ease: "linear",
      },
    },
  },
};

const Marquee = () => {
  return (
    <div className='marquee machina'>
    <motion.div
    className='track'
    variants={marqueeVariants}
    animate='animate'>
        <h1>Changing the way you view fitness by re-defining your holisitc RITUAL.</h1>
    </motion.div>
    </div>
  )
}

export default Marquee