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.
Created by
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.
The four variants of the ticker menu component.
The four variants of the ticker menu component.
The four variants of the ticker menu component.
