Блог

Я хочу создать горизонтальную бесконечную прокрутку в приложении react с помощью фреймера-движения, что для меня ново.
С первого взгляда это показалось довольно простым, но при попытке улучшить или изменить я столкнулся с некоторыми проблемами.
Текст из списка перерабатывается, когда покидает окно просмотра.
Как я могу улучшить поведение бесконечной прокрутки?
Любая помощь будет оценена по достоинству. Демо-версия

 import * as React from "react";
import { render } from "react-dom";
import { motion, AnimatePresence } from "framer-motion";

export const App = () => {
  return (
    <div style={{ margin: 0, padding: 0 }}>
      <AnimatePresence>
        <motion.div
          style={{ margin: 0, padding: 0 }}
          initial={{ y: "100%" }}
          animate={{ x: "100%" }}
          transition={{ duration: 5, loop: Infinity }}
        >
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua.
        </motion.div>
      </AnimatePresence>
    </div>
  );
};
render(<App />, document.getElementById("root"));