Wie erzeugt ich unendlich scrollen karousel im reagieren mit Framer Motion? ⇐ CSS

[Anonymous]

Ich versuche, ein horizontaler Karussell von Ikonen mit React und Framer Motion zu erstellen. Die Animation funktioniert, aber ich begegne Probleme mit sichtbarem leerem Raum am Ende der Animationsschleife.

Code: Select all

import { motion } from "framer-motion";
import { AwardsContainer, AwardsImg } from "./Awards.styled";

const textAnimate = {
initial: { x: 0 },
animate: {
x: "-55%",
transition: {
repeat: Infinity,
repeatType: "mirror",
duration: 25,
},
},
};

function Awards() {
const repeatedAwards = [...awardsData, ...awardsData];

return (


{repeatedAwards.map(({ id, src, alt }, index) => (

))}


);
}

export default Awards;

Problem
Selbst wenn ich den Preis verdoppeln oder verdreifachte, endet die Animation schließlich oder zeigt einen leeren Raum (insbesondere auf großen Bildschirmen wie Fernsehern oder ultra-breiten Monitoren). Awardsdata Ich muss anhängen. Dieser Ansatz führt jedoch immer noch zu sichtbaren Lücken am Ende während der Bildlaufschleife.>