Component
Light Tabs Navigation in Framer
This is a light tabs navigation animation recreated in Framer, from Marcel Kargul’s original work. Feel free to explore the setup, switch between the glowing states, and remix it to see how the interaction is built all without code.
Created by
About the resource
To create this animation, I started by building a light tab component with two states: the default (inactive) and the active variant. In the active state, the tab glows. To achieve that, I used a light mask and adjusted its opacity from 0 to 1 between the two variants. I also added subtle glow and highlight details to enhance the effect. The line light beneath the tab was also wrapped separately and set to change its opacity, just like the light mask.
Once the single tab component was ready, I placed two of them side by side. Then, I added click interactions to each tab and created two more variants where only one tab is active at a time, giving it that smooth, interactive light switch feel.
About the resource
To create this animation, I started by building a light tab component with two states: the default (inactive) and the active variant. In the active state, the tab glows. To achieve that, I used a light mask and adjusted its opacity from 0 to 1 between the two variants. I also added subtle glow and highlight details to enhance the effect. The line light beneath the tab was also wrapped separately and set to change its opacity, just like the light mask.
Once the single tab component was ready, I placed two of them side by side. Then, I added click interactions to each tab and created two more variants where only one tab is active at a time, giving it that smooth, interactive light switch feel.
About the resource
To create this animation, I started by building a light tab component with two states: the default (inactive) and the active variant. In the active state, the tab glows. To achieve that, I used a light mask and adjusted its opacity from 0 to 1 between the two variants. I also added subtle glow and highlight details to enhance the effect. The line light beneath the tab was also wrapped separately and set to change its opacity, just like the light mask.
Once the single tab component was ready, I placed two of them side by side. Then, I added click interactions to each tab and created two more variants where only one tab is active at a time, giving it that smooth, interactive light switch feel.
The three variants of the light tab navigation component in Framer.
The three variants of the light tab navigation component in Framer.
The three variants of the light tab navigation component in Framer.
