Layout & Design

Fading the edges of a Ticker in Framer

Wes

5:09

8.2K views

Jan 16, 2026

About this lesson

In this quick tip, we’ll build a ticker that fades out into the edges in Framer. It keeps scrolling content focused and works reliably on any background

We’ll set up the ticker, compare two fade approaches, and finish with a clean and versatile mask-based solution.

https://www.youtube.com/watch?v=2nF62yPNWyc&t=0s Intro

https://www.youtube.com/watch?v=2nF62yPNWyc&t=25s Building a simple ticker layout

https://www.youtube.com/watch?v=2nF62yPNWyc&t=72s Configuring the ticker effect

https://www.youtube.com/watch?v=2nF62yPNWyc&t=120s The wrong way to fade edges

https://www.youtube.com/watch?v=2nF62yPNWyc&t=194s Why overlay fades aren't reliable

https://www.youtube.com/watch?v=2nF62yPNWyc&t=214s Fading edges with a mask

https://www.youtube.com/watch?v=2nF62yPNWyc&t=267s Final preview and wrap-up

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

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

0:00So, someone told me that it was no 0:01longer possible to fade the edges of a 0:03ticker uh inside of Frame. Just thought 0:06I'd be a good guy, come out here and uh 0:08make a video to show [music] you how 0:11wrong you are.0:13I'm just kidding. I mean, you are wrong,0:15but I'm actually making this video to 0:17teach you how to make this effect inside 0:19of Framer. Uh it's educational.0:24So, here we are in a fresh project,0:26except for these images here. First 0:28thing I'm going to do is select this row 0:31here and then just hit shift A. If you 0:34don't use shift A, this is your sign to 0:36start using it. It will just wrap 0:38whatever you select in a stack and it 0:41also sets the width and the height to 0:43fit. I mean, that's just that's just a 0:45no-brainer, right? It's a two steps in 0:47one. Really efficient. So, now let's do 0:50the same to this row here. And for my 0:53own sanity, I'm I'm just going to name 0:55these layers. I'll name them both 0:57ticker.0:59Now we've got these two stacks, but a 1:02lot of good that that does us when it's 1:03not even on the page. So, let's drag it 1:07and drop it. Okay, so that's step one 1:10sorted. Now, I've just got to turn these 1:12into tickers. So, with both of them 1:15selected, let's head over to the 1:17properties panel and click effects, then 1:21click ticker.1:23I'm going to set the speed to 20%. And I 1:26want the top row to go left. So that's 1:28that's totally fine. I'll just leave it 1:30like that. But let me just select the 1:31bottom row real quick and switch the 1:34direction to right. So now let's check 1:36the preview.1:38I mean that looks pretty good, right?1:40It's a cool effect in itself where it 1:41goes like across the full width of the 1:43screen, but that's not what you clicked 1:45on this video for. So let's fade the 1:48edges. Before I do that though, I just 1:49want to increase the gap between these 1:51images. So, with both ticker stacks 1:54selected, I'm just going to increase the 1:55gap to 20. And I'm doing that because I 1:58just I just think it looks a little bit 1:59better. So, how are we going to fade 2:01these edges? Well, there's actually a 2:04few ways. First, let me show you the 2:07wrong way. That's right. If you do it 2:10this way, you build websites wrong. Bet 2:13you're feeling pretty scared right now.2:15So, first, let's select I was kidding. I 2:17was kidding, by the way. Earlier when I 2:19said that you build websites wrong. I 2:21was kidding. It's uh it's f it's fine to 2:23do things differently even if they are 2:26wrong. Anyway, so let's set the width of 2:29both of these tickers to fill so that it 2:33only goes to the end of the container 2:35and not past it. Now I'm just going to 2:38hit F to open the frame tool and draw a 2:41frame. And I'm just going to drag it 2:43onto the ticker. Then I'm going to 2:45switch the position type to absolute 2:48and make sure it's pinned by 0 pixels to 2:52the top, the right, and the bottom. Then 2:56I'll just switch the width to 25%.2:59And we'll also change the fill to a 3:02gradient where the first point is black 3:06and the second point is transparent.3:09Then when you rotate it, it gives the 3:11illusion that it's fading into the 3:13background. Now, the reason I don't love 3:16this way is because it only works when 3:18the background is like a single color.3:20So, that means no images, no patterns,3:23no videos, and that's all very limiting.3:26So, to drive the point home, I'll just 3:28change the background color to white so 3:30you can see what I mean. I'm sure you 3:32can see my point now. So, let me show 3:34you another more versatile way of doing 3:37this using a mask. So, let me delete 3:40this first cuz we don't need it. Then 3:42I'm going to select both of the tickers,3:45go to styles,3:47mask, then we'll just rotate the 3:50gradient. And you can see it's already 3:52starting to work, but we want it to fade 3:54from both sides. Right? Right now it's 3:56just the one. So we need to add two more 3:58points.4:01The outside ones should have an alpha of 4:05zero, which just means it's totally 4:08transparent. And the inside points 4:11should be 100% visible. Now we can just 4:15clean it up a little by dragging the 4:17points where you want them. By holding 4:19shift, you can actually snap it to the 4:21nearest increment of five. So 25 and 75 4:24is what I'm going with. So now let's 4:27just give it one final preview.4:31Hate to say I told you so,4:34but you did say this was not possible.4:37Jokes aside, guys, uh if you [music] do 4:40come across any other effects that you 4:42think are not possible in Framer,4:44actually [music] would love for you to 4:45let me know so that I can uh make 4:47another video proving you wrong. As 4:50usual, [music] this is a very, very 4:52powerful effect. So, use it wisely and 4:56I'll see you next time.

TeachesLoop Effect Stacks

Also coversFrames

Watch on YouTube ↗

‹ Introducing Advanced Hosting in Framer

Goodbye green screen: Framer’s new 'infinite' video sets ›