Create Carousels, Animated Tickers and Looping Slideshows
Use the Carousel and Ticker components to design smooth-scrolling carousels and infinitely-looping marquees with ease—powered by Framer Motion.
All of these components can be found in the Insert Panel, within the Basics section. Simply drag them onto your web page, connect them to layers on your Canvas, and customize the properties to get going. Design smooth CSS-based carousels that can be scrolled, swiped, and navigated between using either arrows or dots. Or, use the Ticker component to create infinitely scrolling sections that connect seamlessly. If you are looking for auto-playing, the Slideshow is the way to go. All are highly customizable, and powered by Motion. Bring your websites to the next level without writing any code.
Differences
The Carousel uses CSS scroll snapping. It allows you to swipe/drag on mobile, and is great for fluid horizontal and vertical scrolling sections, optionally with arrow controls and dots. It is optimized to support pagination: multiple items per page. Because it’s CSS-based, it performs really well on mobile devices. The animations are handled by the browser, so they cannot be customized.
The Ticker is more of a marquee component, to be used for infinitely animating sections that seamlessly connect: like strings of text, a wall of tweets or a gallery. It handles the duplication for you. It does not include controls or snapping. You can customize the overall animation speed, and slow the ticker down on hover.
The Slideshow is a hybrid of the above. It allows you to create auto-playing and infinitely-looping slideshows. It also includes controls like arrows and dots, just like the Carousel. The snapping and looping animation can be customized, and you can pause the entire slideshow on hover.
Demos
Responsive Carousels
The Carousel component includes multiple sizing options, including two recent additions: Columns and Rows. These allow you to make responsive Carousels, as you can choose to show a fixed amount of content per breakpoint. For example, you can set Columns to 3 on Desktop, 2 on Tablet and 1 on Phone. The component also includes a Radius property, allowing you to clip the contents within if you have Padding set to 0. If you want to play around with responsive carousels, you can remix our demo here.
