Animated Product Cards in Framer

Copy component

Copy component

Animated Product Cards in Framer

Copy component

Interaction

Animated Product Cards in Framer

This is a Framer recreation of the amazing animated product cards originally seen on the Upfront website. Feel free to copy the component to your project or remix the project and see how it's built.

image of Nandi Muzsik

Created by

Animated Product Cards in Framer
Animated Product Cards in Framer
Animated Product Cards in Framer

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

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.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction