---
title: "Screen StickyMedia — Free Framer component · Best of Framer"
description: "Free Framer component · by Kateryna Dei · Text. Interactive sticky scroll & marque"
canonical: "https://framer.elliotli.dev/component/screen-stickymedia"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Screen StickyMedia

# Screen StickyMedia

Interactive sticky scroll & marque

[View on Framer](https://framer.com/marketplace/components/screen-stickymedia/?via=elliot-li)

![Screen StickyMedia preview image 1](https://framer.elliotli.dev/og/component/screen-stickymedia/5ef5f4dd5ac7ae5c/1600x1186.jpg)

## Summary

Interactive sticky scroll & marque

## Description

`Screen Sticky Media is an interactive section component for Framer that delivers a multi-stage sticky zoom effect on scroll, layered with a smooth marquee ticker.`

## Property Controls

### Section Background

1.  Section BG (Enum): Choose between Color or Image for the section background.
    
2.  BG Color (Color): Pick a solid background color for the section. Visible when Section BG is set to Color.
    
3.  BG Image (Image): Upload a custom background image for the entire section. Visible when Section BG is set to Image.
    
    ### Media Settings
    
4.  Media Type (Enum): Select central element content type — Video, Image, or Solid Color.
    
5.  Video File (File): Upload video files directly from your computer (.mp4, .webm, .mov). Visible when Media Type is set to Video.
    
6.  Media Image (Image): Upload a background image asset for the central card. Visible when Media Type is set to Image.
    
7.  Media Color (Color): Pick a solid fill color for the central card. Visible when Media Type is set to Solid Color.
    
    Ticker Settings
    
8.  Ticker Text (String): Customize the animated headline message.
    
9.  Speed (s) (Number): Set marquee animation cycle duration in seconds (range: 5s – 60s).
    
10.  Gap (px) (Number): Adjust distance between repeating text entries and dot dividers (range: 10px – 100px).
     
     ### Layout & Scroll Settings
     
11.  Start Width % (Number): Initial width percentage of the media element before scrolling starts (range: 10% – 80%).
     
12.  Start Height % (Number): Initial height percentage of the media element before scrolling starts (range: 10% – 80%).
     
13.  Border Radius (Number): Starting corner radius in pixels (range: 0px – 60px), animating down to 0px upon full scale.
     
14.  Section Height (Number): Total scroll track height in vh units (range: 140vh – 400vh). Recommended: 180vh – 220vh.
     

## Rank history [How rankings work →](/terms#rankings)

-   All · #3355

## Details

- **Author**: Kateryna Dei
- **Published**: 2026-08-21
- **Updated**: 2026-08-21
- **Added**: 2026-08-21
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing