Interaction
Animated Product Cards in Framer
Created by
About the resource
Developing this animated card in Framer without any code isn't too complicated. Once you have the assets for your cards—like the image for the card and the animated version of it as a video (made in 3D software)—all you have to do is assemble everything into a component and add a hover state to it.
About the resource
Developing this animated card in Framer without any code isn't too complicated. Once you have the assets for your cards—like the image for the card and the animated version of it as a video (made in 3D software)—all you have to do is assemble everything into a component and add a hover state to it.
About the resource
Developing this animated card in Framer without any code isn't too complicated. Once you have the assets for your cards—like the image for the card and the animated version of it as a video (made in 3D software)—all you have to do is assemble everything into a component and add a hover state to it.
Animated product card component variants.
Animated product card component variants.
Animated product card component variants.
As you can see in the image above, the only changes we make to the hover state are setting the opacity of the video component to 1 and changing the playing property to "yes".
That's it. Simple as that.
As you can see in the image above, the only changes we make to the hover state are setting the opacity of the video component to 1 and changing the playing property to "yes".
That's it. Simple as that.
As you can see in the image above, the only changes we make to the hover state are setting the opacity of the video component to 1 and changing the playing property to "yes".
That's it. Simple as that.
