Marquee Along Path is a customizable Framer component for animating image cards along an SVG path. Instead of a standard straight-line marquee, it lets your visuals travel through waves, loops, orbital curves, rising paths, or any custom SVG path you paste in.
It is built for designers who want a more expressive way to show portfolios, product images, client logos, gallery items, moodboards, or visual highlights inside a Framer site. You can use the built-in path presets for quick results, or switch to a custom SVG path for a fully tailored motion route.
The component includes controls for image items, item size, border radius, shadows, borders, object fit, animation speed, direction, repeat count, start offset, hover slowdown, hover scale, drag-to-scrub interaction, guide path visibility, path color, stroke width, dash style, labels, background color, and accessibility label.
It is responsive by default, supports Framer’s static rendering, respects reduced-motion preferences, and includes fallback behavior if a custom SVG path is invalid. This makes it suitable for real production pages, not just experimental visual sections.
Best For
Portfolio image trails
Product showcase sections
Creative agency landing pages
Brand/logo motion strips
Editorial or gallery layouts
Interactive hero backgrounds
Visual storytelling sections
Key Features
Animate images along editable SVG paths
Built-in path presets: Wave, Loop, Orbit, and Rise
Custom SVG path support
Drag-to-scrub interaction
Hover slowdown and hover scaling
Optional visible guide path
Optional labels on each item
Responsive sizing
Reduced-motion support
Clean Framer property controls
No external demo asset dependency
Marquee Along Path is a customizable Framer component for animating image cards along an SVG path. Instead of a standard straight-line marquee, it lets your visuals travel through waves, loops, orbital curves, rising paths, or any custom SVG path you paste in.
It is built for designers who want a more expressive way to show portfolios, product images, client logos, gallery items, moodboards, or visual highlights inside a Framer site. You can use the built-in path presets for quick results, or switch to a custom SVG path for a fully tailored motion route.
The component includes controls for image items, item size, border radius, shadows, borders, object fit, animation speed, direction, repeat count, start offset, hover slowdown, hover scale, drag-to-scrub interaction, guide path visibility, path color, stroke width, dash style, labels, background color, and accessibility label.
It is responsive by default, supports Framer’s static rendering, respects reduced-motion preferences, and includes fallback behavior if a custom SVG path is invalid. This makes it suitable for real production pages, not just experimental visual sections.
Best For
Portfolio image trails
Product showcase sections
Creative agency landing pages
Brand/logo motion strips
Editorial or gallery layouts
Interactive hero backgrounds
Visual storytelling sections
Key Features
Animate images along editable SVG paths
Built-in path presets: Wave, Loop, Orbit, and Rise
Custom SVG path support
Drag-to-scrub interaction
Hover slowdown and hover scaling
Optional visible guide path
Optional labels on each item
Responsive sizing
Reduced-motion support
Clean Framer property controls
No external demo asset dependency