Features
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.
Step / 01
Remix the project.
Step / 02
See how it's built.
Step / 03
Try recreating it for practice, or copy and paste it to your project.