# Fading the edges of a Ticker in Framer Source: https://www.youtube.com/watch?v=2nF62yPNWyc Recap page: https://rapidrecap.app/video/2nF62yPNWyc Generated: 2026-01-16T20:04:51.14+00:00 --- ## Quick Overview The video demonstrates how to create a fading edge effect for a "Ticker" element in Framer by applying a linear gradient mask with varying alpha values across the element's width, setting the start alpha to 0% and the end alpha to 100% for a smooth fade-out effect. **Key Points:** - The tutorial focuses on creating a fading edge effect for a 'Ticker' element within the Framer design tool. - The technique involves selecting the 'Ticker' elements (two stacks of images) and applying a 'Mask' effect from the Styles panel. - A linear gradient mask is used, where the start point of the gradient is set to 0% alpha (fully transparent) and the end point is set to 100% alpha (fully opaque). - The direction of the linear mask is set to 90 degrees (horizontal) to achieve the fade across the width of the ticker. - The speaker initially sets the width of the masking frame to 25% and positions it absolutely, pinning it to the top and bottom edges of the ticker container. - The initial setup involves creating two 'Ticker' stacks (top and bottom rows) and ensuring the images within them are set to fill the container width using 'Fit Content' for proper resizing. - The final result achieves a visual effect where the content fades out towards the edges, mimicking a scroll effect where elements disappear into the background. ![Screenshot at 00:24: The Framer interface showing the 'Assets' tab open, displaying a grid of template previews, with two groups labeled 'Stack' selected in the Layers panel, setting the stage for applying the masking effect.](https://ss.rapidrecap.app/screens/2nF62yPNWyc/00-00-24.jpg) **Context:** Wes Ambler, specializing in Education at Framer, provides a tutorial demonstrating a specific visual technique within the Framer design application. The core concept revolves around applying a mask effect to a 'Ticker' component—a common design pattern for showcasing a series of images or content blocks sequentially—to create a subtle fading effect on the edges, making the content appear to blend into the background as if scrolling off-screen. ## Detailed Analysis The tutorial explains how to apply a fading edge effect to a Framer 'Ticker' element, correcting a perceived limitation where elements only fade based on a single color background. The instructor starts by setting up the structure: selecting two rows of images, grouping them into two separate 'Ticker' stacks, and ensuring the images are set to 'Fit Content' for width scaling. The critical step involves creating an absolutely positioned white frame over the top ticker row, setting its width to 25% and pinning it vertically. This frame is then used as the masking element. The instructor navigates to the 'Styles' panel under 'Effects' and selects 'Mask', choosing the linear gradient option. The gradient's starting point (left side) is set to 0% alpha (fully transparent), and the ending point (right side) is set to 100% alpha (fully opaque), with the rotation set to 90 degrees. This creates a horizontal fade across the top row. The same process is repeated for the bottom ticker row, but the mask is inverted: the left side is 100% alpha, and the right side is 0% alpha, ensuring the fade happens outwards from the center. The instructor points out that this masking technique is superior to methods that rely on a single background color because it works regardless of the content or background behind the ticker, providing a more versatile and powerful visual treatment. ### Setup and Structure - Starting with a fresh project containing two image stacks ('Ticker' and 'Ticker') - Selecting the top 'Stack' and setting its layout direction to horizontal, gap to 20px, and size to 'Fit Content' - Repeating for the bottom 'Stack'. ### Creating the Masking Frame - Drawing a new white Frame element, setting its position to absolute, pinning it top/bottom (0px from T and B), and setting its width to 25% relative to its parent container. ### Applying the Top Fade Mask - Applying a 'Ticker' effect to the frame - Setting the mask type to 'Linear' - Setting the left gradient stop (0% alpha) to 0% and the right stop (100% alpha) to 100%, resulting in a fade-out to the right. ### Applying the Bottom Fade Mask (Inverted) - Repeating the masking process for the bottom ticker's frame, but inverting the gradient: left stop at 100% alpha and right stop at 0% alpha, creating a fade-out to the right (away from the center line). ### Final Review and Comparison - Previewing the result shows content fading smoothly across both edges regardless of the underlying background, demonstrating a powerful alternative to single-color fade methods. ![Screenshot at 00:32: Selecting the top row stack and applying the Fit Content shortcut \(Shift+A\) in the layout properties panel.](https://ss.rapidrecap.app/screens/2nF62yPNWyc/00-00-32.jpg) ![Screenshot at 00:50: Selecting the top three images in the Layers panel to group them under a new 'Stack' layer named 'Ticker'.](https://ss.rapidrecap.app/screens/2nF62yPNWyc/00-00-50.jpg) ![Screenshot at 01:19: Accessing the 'Effects' panel and opening the 'Ticker' effect menu to apply the masking technique.](https://ss.rapidrecap.app/screens/2nF62yPNWyc/00-01-19.jpg) ![Screenshot at 02:41: Drawing a new white Frame element on the canvas, which will act as the mask overlay.](https://ss.rapidrecap.app/screens/2nF62yPNWyc/00-02-41.jpg) ![Screenshot at 03:04: The 'Fill' panel opened, configuring the linear gradient for the mask with the starting point set to black \(0% alpha\).](https://ss.rapidrecap.app/screens/2nF62yPNWyc/00-03-04.jpg)