Interaction
View Work Microinteraction in Framer
About The Resource
Creating an interaction like this in Framer is pretty simple. All you need are components, variants, and interactions.
For instance, in this interaction, I used three components. One component is the work example image in the background. I turned it into a component because on hover, there is a little light shining through the image. This effect is achieved by creating two variants for the component. In the first variant, the light is on the left side, and in the second variant, the light moves to the right side. Framer will smoothly animate between these states, creating a nice light shine that moves through the image from left to right.
About The Resource
Creating an interaction like this in Framer is pretty simple. All you need are components, variants, and interactions.
For instance, in this interaction, I used three components. One component is the work example image in the background. I turned it into a component because on hover, there is a little light shining through the image. This effect is achieved by creating two variants for the component. In the first variant, the light is on the left side, and in the second variant, the light moves to the right side. Framer will smoothly animate between these states, creating a nice light shine that moves through the image from left to right.
About The Resource
Creating an interaction like this in Framer is pretty simple. All you need are components, variants, and interactions.
For instance, in this interaction, I used three components. One component is the work example image in the background. I turned it into a component because on hover, there is a little light shining through the image. This effect is achieved by creating two variants for the component. In the first variant, the light is on the left side, and in the second variant, the light moves to the right side. Framer will smoothly animate between these states, creating a nice light shine that moves through the image from left to right.
Framer component variant setup.
Framer component variant setup.
Framer component variant setup.
The second component is a simple button component with a default and a hover variant where the background color's opacity increases.
The second component is a simple button component with a default and a hover variant where the background color's opacity increases.
The second component is a simple button component with a default and a hover variant where the background color's opacity increases.
Framer button component variants.
Framer button component variants.
Framer button component variants.
The third component is the main one that wraps everything together. It's used to create the main hover effect. I create a default variant and a hover variant where I make some changes. I rotate the images, change the button's component variant to hover, and also the background image's variant to hover so the light will shine through when hovered over.
The third component is the main one that wraps everything together. It's used to create the main hover effect. I create a default variant and a hover variant where I make some changes. I rotate the images, change the button's component variant to hover, and also the background image's variant to hover so the light will shine through when hovered over.
The third component is the main one that wraps everything together. It's used to create the main hover effect. I create a default variant and a hover variant where I make some changes. I rotate the images, change the button's component variant to hover, and also the background image's variant to hover so the light will shine through when hovered over.
Main component variants.
Main component variants.
Main component variants.
Then I connect these two variants with mouse enter and mouse leave effects and Framer will smartly animate between these states. Done. Easy.
Then I connect these two variants with mouse enter and mouse leave effects and Framer will smartly animate between these states. Done. Easy.
Then I connect these two variants with mouse enter and mouse leave effects and Framer will smartly animate between these states. Done. Easy.
