Ticker Menu in Framer

Copy component

Ticker Menu in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Ticker Menu in Framer

This is a ticker menu recreated in Framer, from David’s work. Feel free to remix the project and explore how to achieve this hover interaction in Framer without writing any code.

image of Nandi Muzsik
image of Prianca S.
Image of David

Created by

,

and

Horizontal ticker menu with Mojave selected and macOS names listed
Horizontal ticker menu with Mojave selected and macOS names listed
Horizontal ticker menu with Mojave selected and macOS names listed

About the resource

To create this ticker menu component, I combined two components and used trigger frames to reveal content on hover. I began by adding text and an image to the ticker component, then placed it inside the main ticker menu component. Within this, I set up four variants—two default states and two hover states—with masks applied to the top and bottom.

In the Default (from top) variant, I created two layers: ticker from top and ticker from bottom. Both are absolutely positioned and pinned, with the ticker component nested inside each one. Above them, I added a third layer (z-index 4) containing two trigger frames—one pinned to the top and one to the bottom—each covering 50% of the height.

For the Visible from top variant, I applied a linear mask to the top ticker layer. Similarly, the Visible from bottom variant uses a mask on the bottom layer. Finally, I added mouse enter and leave interactions on the trigger frames to switch between the variants.

About the resource

To create this ticker menu component, I combined two components and used trigger frames to reveal content on hover. I began by adding text and an image to the ticker component, then placed it inside the main ticker menu component. Within this, I set up four variants—two default states and two hover states—with masks applied to the top and bottom.

In the Default (from top) variant, I created two layers: ticker from top and ticker from bottom. Both are absolutely positioned and pinned, with the ticker component nested inside each one. Above them, I added a third layer (z-index 4) containing two trigger frames—one pinned to the top and one to the bottom—each covering 50% of the height.

For the Visible from top variant, I applied a linear mask to the top ticker layer. Similarly, the Visible from bottom variant uses a mask on the bottom layer. Finally, I added mouse enter and leave interactions on the trigger frames to switch between the variants.

About the resource

To create this ticker menu component, I combined two components and used trigger frames to reveal content on hover. I began by adding text and an image to the ticker component, then placed it inside the main ticker menu component. Within this, I set up four variants—two default states and two hover states—with masks applied to the top and bottom.

In the Default (from top) variant, I created two layers: ticker from top and ticker from bottom. Both are absolutely positioned and pinned, with the ticker component nested inside each one. Above them, I added a third layer (z-index 4) containing two trigger frames—one pinned to the top and one to the bottom—each covering 50% of the height.

For the Visible from top variant, I applied a linear mask to the top ticker layer. Similarly, the Visible from bottom variant uses a mask on the bottom layer. Finally, I added mouse enter and leave interactions on the trigger frames to switch between the variants.

Framer ticker menu animation showing Mojave item scroll transitions

The four variants of the ticker menu component.

Framer ticker menu animation showing Mojave item scroll transitions

The four variants of the ticker menu component.

Framer ticker menu animation showing Mojave item scroll transitions

The four variants of the ticker menu component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • 3D purple crystal app icon on dark background

    Logo Hover Shine Effect in Framer

    Component

    3D purple crystal app icon on dark background

    Logo Hover Shine Effect in Framer

    Component

    3D purple crystal app icon on dark background

    Logo Hover Shine Effect in Framer

    Component

  • Scroll animation with still life and interior images

    3D Scrolling Paper Images for Framer

    Component

    Scroll animation with still life and interior images

    3D Scrolling Paper Images for Framer

    Component

    Scroll animation with still life and interior images

    3D Scrolling Paper Images for Framer

    Component