Learn how to create an infinite marquee that follows a custom SVG path using React and Motion.

You’re likely familiar with the infinite scrolling marquee effect – that continuous horizontal scroll of content that many websites use to showcase their work, testimonials, or partner brands. It’s a lovely and simple effect, but in this tutorial, we will spice it up by creating a marquee that moves along a custom, funky SVG path. We’ll be using React, Typescript and 

 (formerly Framer Motion) for the animation, so let’s get started!

, the growing library of ready-to-use React components & microinteractions.

Design

![](https://m.stacker.news/99019)

Learn how to create an infinite marquee that follows a custom SVG path using React and Motion.

You’re likely familiar with the infinite scrolling marquee effect – that continuous horizontal scroll of content that many websites use to showcase their work, testimonials, or partner brands. It’s a lovely and simple effect, but in this tutorial, we will spice it up by creating a marquee that moves along a custom, funky SVG path. We’ll be using React, Typescript and [Motion](https://motion.dev) (formerly Framer Motion) for the animation, so let’s get started!

You can also find [this component](https://www.fancycomponents.dev/docs/components/blocks/marquee-along-svg-path) in [Fancy Components](https://www.fancycomponents.dev/), the growing library of ready-to-use React components & microinteractions.

![](https://m.stacker.news/99020)
