Copy component
Copy component
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Component
This is a detail pill component I recreated in Framer, based on a concept by Jakub. This fun interaction is ideal for embedding brief, hidden details in a clean, compact style, enhancing user experience with interactive content. Just copy, paste, and customize this small fun interaction in your Framer projects.
Created by
To create a Detail Pill interaction in Framer, begin by setting up an extended variant of the component and wrapping the extra text in a container. Then, create a scaled-down variant with a slight blur and change its position to absolute with hidden overflow.
The key is to animate only the text within the wrapped container. Finally, place the text wrap and set its opacity to zero initially for a smooth reveal effect. This sequence helps create the interactive transition effect. Also, make sure to trigger the interaction on click specifically from info tag inside the pill and not the whole element.
To create a Detail Pill interaction in Framer, begin by setting up an extended variant of the component and wrapping the extra text in a container. Then, create a scaled-down variant with a slight blur and change its position to absolute with hidden overflow.
The key is to animate only the text within the wrapped container. Finally, place the text wrap and set its opacity to zero initially for a smooth reveal effect. This sequence helps create the interactive transition effect. Also, make sure to trigger the interaction on click specifically from info tag inside the pill and not the whole element.
To create a Detail Pill interaction in Framer, begin by setting up an extended variant of the component and wrapping the extra text in a container. Then, create a scaled-down variant with a slight blur and change its position to absolute with hidden overflow.
The key is to animate only the text within the wrapped container. Finally, place the text wrap and set its opacity to zero initially for a smooth reveal effect. This sequence helps create the interactive transition effect. Also, make sure to trigger the interaction on click specifically from info tag inside the pill and not the whole element.
The two variants fo the component.
The two variants fo the component.
The two variants fo the component.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
