Framer Update, Animations

Framer Update: Ticker Effect

Benjamin

4:26

22K views

Nov 13, 2025

About this lesson

Meet the Ticker Effect, a new way to design continuous animations for text, images, and beyond. We’ve completely re-imagined Tickers in Framer. This new Ticker Effect now works with the CMS, can be applied to any Stack, supports unique settings for each Breakpoint, and is even faster and more accessible. You can find it in the Effects menu, and it can be applied to any CMS Collection List or Stack. No more messy canvas, duplicated collections with filters, or hidden duplicates for responsiveness. Plus, it brings all-new features, like draggable support and automatic orientation detection, unlocking new workflows and more creative interactions. We think you’ll love it. The highest-fidelity animation and interaction tools. Only in Framer. https://framer.com/updates/ticker-effect

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00[music]0:12[music]0:19[music] Yo, my name is Benjamin and this 0:23is the new ticker effect. Here&#39;s how it 0:26works. This is a collection list,0:29meaning all content here is sourced from 0:32the framer CMS. And now I can add a 0:36continuous animation to these projects 0:38by simply selecting the collection list 0:41[music] and then heading over to the 0:43effect panel and adding our new ticker 0:47effect. And this gives me a few very 0:51simple properties to control. The speed 0:54of the animation, the speed on hover,0:57the direction, which we automatically 0:59detect and adapt, and a new property 1:03called dragable that we&#39;ll look into 1:06later on. Here, let&#39;s slow it down just 1:08a little bit by setting speed to 60. And 1:12just like that, we have designed this 1:15infinitely repeating continuous 1:17animation that is completely compatible 1:19with existing effects in Framer like our 1:22hover effect that you can see here as 1:24well. So, not only is it very easy to 1:28add, we can also keep editing our layers 1:31and content as we normally would. And 1:34[music] we can even customize what it 1:36looks like in a breakpoint, making for 1:38an incredibly seamless editing 1:41experience and all new responsive 1:43[music] ticker designs. Not only does 1:46our new ticker effect work on CMS 1:49collection lists, we can now also apply 1:52it to [music] any stack in Framer. So 1:55this stack has the ticker effect applied 1:57with hover set to 50 and dragable to 2:01yes. And these are just images that have 2:05width set to fill and height to auto.2:08Using our recently introduced fit image 2:12sizing. So here you see it also works on 2:15stacks and on hover it slows down and 2:19it&#39;s now dragable with the drag 2:22animation transitioning seamlessly into 2:25the ticker animation resulting in an 2:28interaction that feels incredible yet is 2:31so easy to add. Designing responsive 2:34tickers in this stackbased setup is also 2:36incredibly easy. We could decide to hide 2:39a few items in the [music] tablet 2:41breakpoint, for example. Or on the phone 2:44breakpoint, we could decide to give all 2:46of the items a fixed width, giving us 2:49more control over how our project images 2:52render. And when we now give this a 2:55preview, you can see we&#39;ve designed a 2:58responsive ticker section with unique 3:01layouts for each breakpoint.3:05So, for people familiar with the 3:07previous Framer ticker, let&#39;s summarize 3:10what&#39;s new. This new ticker effect works 3:14with the Framer CMS, can be applied to 3:18any [music] stack, and can be customized 3:21per breakpoint. In fact, we&#39;ve rebuilt 3:24this sticker from the ground up using 3:27the new motion component, which also 3:30means it has improved performance,3:33improved accessibility, and unlocks new 3:37drag interactions. Let&#39;s look at one 3:40final example to end with. Using this 3:43new ticker effect, I can also set speed 3:46to zero while keeping dragable to yes.3:50And then let&#39;s also add a web cursor to 3:54our stack here to indicate this section 3:57is dragable. And now we have essentially 4:00created this infinitely dragable section 4:03that we could continue customizing but 4:06would work great on many landing pages 4:09and portfolios.4:11That&#39;s it for this video. Thank you so 4:15much for watching and as always stay 4:17tuned for more updates coming soon.

TeachesLoop Effect Collection Lists

Also coversBreakpoints Collections Components Custom Cursors Hover & Press Responsive Design SEO Audit Sizing Stacks

Watch on YouTube ↗

‹ Framer: Stop Waiting. Start Shipping.

Framer Update: Auto Rename ›