# Framer Update: Ticker Effect Source: https://www.youtube.com/watch?v=vze3QYLRTEw Recap page: https://rapidrecap.app/video/vze3QYLRTEw Generated: 2025-11-13T16:06:47.663+00:00 --- ## Quick Overview Framer introduced the new Ticker effect, which allows designers to create infinitely repeating, smoothly animated horizontal content strips sourced directly from the Framer CMS, offering full compatibility with existing effects, stacks, and breakpoints for highly responsive design. **Key Points:** - The new Framer Ticker effect enables infinitely repeating, continuous animation of content sourced from the Framer CMS. - The animation speed is customizable, demonstrated by setting the hover speed to 60% and the non-hover speed to 0% for a paused state on hover. - The Ticker effect is fully compatible with existing Framer effects, like the hover effect, which slows down the animation upon mouse-over. - The component supports drag interactions, allowing users to manually drag the content strip for immediate feedback. - The design seamlessly adapts across different breakpoints (Desktop, Tablet, Phone) using fixed width for items, ensuring responsive behavior. - The new Ticker rebuilds the previous Ticker functionality but integrates it with Framer's modern features, including CMS sourcing and breakpoint customization. - The height of the items within the Ticker defaults to 'Auto' but can be manually set, as demonstrated by changing the height to 250px. ![Screenshot at 0:27: Demonstration of the Ticker component being applied to a Collection list within the Framer canvas, showing multiple vertically oriented project posters arranged side-by-side.](https://ss.rapidrecap.app/screens/vze3QYLRTEw/00-00-27.png) **Context:** This video serves as a feature announcement and brief tutorial demonstrating the newly released 'Ticker Effect' within the Framer design and prototyping tool. The presenter, Benjamin, showcases how this updated component integrates with Framer's Content Management System (CMS) and responsive design features, contrasting it with older implementations to highlight improvements in animation control and adaptability. ## Detailed Analysis Benjamin introduces the new Ticker effect in Framer, emphasizing that it is now a component that works directly with the Framer CMS, unlike previous iterations. He first demonstrates the effect using a collection list containing several project posters of varying heights, showing how the Ticker provides an infinitely repeating, continuous animation. Key properties like 'Speed' (set to 100% initially, then slowed to 60% on hover) and 'Direction' are adjustable. The presenter highlights that the effect is compatible with existing Framer effects, such as the hover animation that slows the ticker down. Furthermore, the component supports being 'Draggable,' allowing users to intuitively drag the content strip. A major advantage is its responsiveness; the design maintains its layout across Desktop (1280px), Tablet (1024px), and Phone breakpoints, with items retaining a fixed width but auto-sizing height, although height can be manually set to 250px. The video concludes by showing that the new Ticker is a complete rebuild, offering improved performance, accessibility, and new drag interactions, making it highly customizable for landing pages and portfolios. ### New Ticker Introduction - The new Ticker effect integrates with Framer CMS - It supports continuous, infinitely repeating animation - The effect is a complete rebuild offering improved performance and accessibility ### Animation Controls - Speed can be set for normal and hover states (e.g., 60% on hover, 0% speed when hovered over) - The component supports drag interactions for immediate user testing - Direction and other properties are easily configurable in the Inspector panel ### Responsiveness and Compatibility - The Ticker works seamlessly across all breakpoints (Desktop, Tablet, Phone) - Items maintain fixed width while height can be set to 'Auto' or a fixed value (e.g., 250px) - It is compatible with existing Framer effects and stack structures ![Screenshot at 0:03: Initial display of various colorful design assets labeled with project names like 'Cie', 'Musin', and 'Soirée'.](https://ss.rapidrecap.app/screens/vze3QYLRTEw/00-00-03.png) ![Screenshot at 0:20: The Framer interface showing the canvas with a component selected, listing CMS data columns \(2022-2025\) above the visual collection list.](https://ss.rapidrecap.app/screens/vze3QYLRTEw/00-00-20.png) ![Screenshot at 0:31: Switching to the CMS view, showing a dark table listing collections like 'Roots', 'Soft', 'Spaceland', and 'Thaili' with associated metadata.](https://ss.rapidrecap.app/screens/vze3QYLRTEw/00-00-31.png) ![Screenshot at 0:43: The Ticker effect panel open in the Inspector, showing adjustable properties like 'Speed' \(set to 100%\) and 'Direction'.](https://ss.rapidrecap.app/screens/vze3QYLRTEw/00-00-43.png) ![Screenshot at 1:07: Adjusting the Ticker speed down to 60% to demonstrate a slower animation speed.](https://ss.rapidrecap.app/screens/vze3QYLRTEw/00-01-07.png) ![Screenshot at 1:26: The view shifting to show three responsive previews: Desktop, Tablet, and Phone, demonstrating layout adaptation.](https://ss.rapidrecap.app/screens/vze3QYLRTEw/00-01-26.png) ![Screenshot at 1:51: The Ticker effect being applied to a different stack of assets \(showing various modern poster designs\) in the development view.](https://ss.rapidrecap.app/screens/vze3QYLRTEw/00-01-51.png) ![Screenshot at 2:55: Previewing the responsive Ticker section on the Desktop view, showing staggered card heights.](https://ss.rapidrecap.app/screens/vze3QYLRTEw/00-02-55.png) ![Screenshot at 3:35: Text overlay slide announcing 'New drag interactions'.](https://ss.rapidrecap.app/screens/vze3QYLRTEw/00-03-35.png)