Component
Show More Micro Interaction in Framer
This is a Show More Micro Interaction recreated in Framer from Nitish’s original work. Feel free to copy it into your projects or remix it to explore how this smooth interaction is built in Framer.
About the resource
To create the show more micro interaction in Framer, I created two main variants: default and expanded. In the expanded variant, all items are stacked together using relative positioning with an additional frame serving as the background layer. I used z-index to control which layers appear above one another.
In the default variant, two items are set to absolute positioning so they stay fixed, with added blur and reduced opacity for a subtle depth effect. The icon is a separate component with three variants: dots visible, cross visible, and a pressed state where the icon scales down slightly. The interaction works by switching between these variants directly from the icon on click.
About the resource
To create the show more micro interaction in Framer, I created two main variants: default and expanded. In the expanded variant, all items are stacked together using relative positioning with an additional frame serving as the background layer. I used z-index to control which layers appear above one another.
In the default variant, two items are set to absolute positioning so they stay fixed, with added blur and reduced opacity for a subtle depth effect. The icon is a separate component with three variants: dots visible, cross visible, and a pressed state where the icon scales down slightly. The interaction works by switching between these variants directly from the icon on click.
About the resource
To create the show more micro interaction in Framer, I created two main variants: default and expanded. In the expanded variant, all items are stacked together using relative positioning with an additional frame serving as the background layer. I used z-index to control which layers appear above one another.
In the default variant, two items are set to absolute positioning so they stay fixed, with added blur and reduced opacity for a subtle depth effect. The icon is a separate component with three variants: dots visible, cross visible, and a pressed state where the icon scales down slightly. The interaction works by switching between these variants directly from the icon on click.
The two variants of the pill component in Framer.
The two variants of the pill component in Framer.
The two variants of the pill component in Framer.
