Interaction
Underline Button Interaction in Framer
This is a button interaction in Framer that adds an underline, and guess what? It uses zero code. It's a tricky interaction as the underline pops in from the left and goes out to the right. But hey, we can nail it using a secret technique.
Created by
About the resource
The secret technique for creating this interaction? It's essentially adding an "appear" interaction to the "line out" variant to get the line back to the "default" variant (that's the left side). This happens because appear interactions automatically trigger when the variant shows up on the site.
Still, we've gotta pull another rabbit out of the hat to make sure that the line doesn't animate as we go back from "line out" to the "default" variant. So, we set the "default" variant's transition to instant, making all animations going into "default" happen instantly.
About the resource
The secret technique for creating this interaction? It's essentially adding an "appear" interaction to the "line out" variant to get the line back to the "default" variant (that's the left side). This happens because appear interactions automatically trigger when the variant shows up on the site.
Still, we've gotta pull another rabbit out of the hat to make sure that the line doesn't animate as we go back from "line out" to the "default" variant. So, we set the "default" variant's transition to instant, making all animations going into "default" happen instantly.
About the resource
The secret technique for creating this interaction? It's essentially adding an "appear" interaction to the "line out" variant to get the line back to the "default" variant (that's the left side). This happens because appear interactions automatically trigger when the variant shows up on the site.
Still, we've gotta pull another rabbit out of the hat to make sure that the line doesn't animate as we go back from "line out" to the "default" variant. So, we set the "default" variant's transition to instant, making all animations going into "default" happen instantly.
Button underline Framer component variants.
Button underline Framer component variants.
Button underline Framer component variants.
