Interaction
Hover Cursor in Framer
About the resource
To create this hover cursor interaction, first, I created the text hover effect by grouping two text layers and turning them into a component with three variants (default, grey and hover). I set up interactions between these variants to animate smoothly when switching, creating the hover effect. I then replicated this component with different titles, wrapped them in a stack, and created a text layer component.
Next, I added five variants for the five text layers. For each variant, when the hover state is active, the hovered text remains highlighted while the rest switch to grey. I set up mouse enter and mouse leave interactions to connect to all the variants.
About the resource
To create this hover cursor interaction, first, I created the text hover effect by grouping two text layers and turning them into a component with three variants (default, grey and hover). I set up interactions between these variants to animate smoothly when switching, creating the hover effect. I then replicated this component with different titles, wrapped them in a stack, and created a text layer component.
Next, I added five variants for the five text layers. For each variant, when the hover state is active, the hovered text remains highlighted while the rest switch to grey. I set up mouse enter and mouse leave interactions to connect to all the variants.
About the resource
To create this hover cursor interaction, first, I created the text hover effect by grouping two text layers and turning them into a component with three variants (default, grey and hover). I set up interactions between these variants to animate smoothly when switching, creating the hover effect. I then replicated this component with different titles, wrapped them in a stack, and created a text layer component.
Next, I added five variants for the five text layers. For each variant, when the hover state is active, the hovered text remains highlighted while the rest switch to grey. I set up mouse enter and mouse leave interactions to connect to all the variants.
The six variants of the text layers component.
The six variants of the text layers component.
The six variants of the text layers component.
Finally, I made a custom cursor by creating an image cursor component and assigned it to specific text layer as a custom cursor in the default variant. Now, the image cursor appears only when hovering over those elements. Thats it!
Finally, I made a custom cursor by creating an image cursor component and assigned it to specific text layer as a custom cursor in the default variant. Now, the image cursor appears only when hovering over those elements. Thats it!
Finally, I made a custom cursor by creating an image cursor component and assigned it to specific text layer as a custom cursor in the default variant. Now, the image cursor appears only when hovering over those elements. Thats it!
The custom cursor (image cursor component) assigned for variant 1 of the text layers component.
The custom cursor (image cursor component) assigned for variant 1 of the text layers component.
The custom cursor (image cursor component) assigned for variant 1 of the text layers component.
