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.

The second component is a simple button component with a default and a hover variant where the background color's opacity increases.

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.

Then I connect these two variants with mouse enter and mouse leave effects and Framer will smartly animate between these states. Done. Easy.