Wie erzeugt ich unendlich scrollen karousel im reagieren mit Framer Motion?
Posted: 22 May 2025, 09:27
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.
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.>
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;
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.>