Screen StickyMedia

Show Preview
Screen StickyMedia

About Screen StickyMedia

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.