MAX Card Animation in Framer

Copy component

MAX Card Animation in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

MAX Card Animation in Framer

This is a card animation recreated from the max.com website using Framer. It's amazing that we can do card animations in Framer without writing any code. Feel free to copy the component, customize it with component properties, or remix the project to see how it's built.

image of Nandi Muzsik

Created by

MAX Card Animation in Framer
MAX Card Animation in Framer
MAX Card Animation in Framer

About the resource

To create this interaction in Framer, we just need to draw the necessary frames on the design canvas and structure them correctly. Once we have all the frames and text layers for our little element, we can turn it into a component.

After our card is a component, we can simply add a "hover" variant to it, where we can change some properties of the element. For example, we can show a border around the image and change the text to a blue fill color.

About the resource

To create this interaction in Framer, we just need to draw the necessary frames on the design canvas and structure them correctly. Once we have all the frames and text layers for our little element, we can turn it into a component.

After our card is a component, we can simply add a "hover" variant to it, where we can change some properties of the element. For example, we can show a border around the image and change the text to a blue fill color.

About the resource

To create this interaction in Framer, we just need to draw the necessary frames on the design canvas and structure them correctly. Once we have all the frames and text layers for our little element, we can turn it into a component.

After our card is a component, we can simply add a "hover" variant to it, where we can change some properties of the element. For example, we can show a border around the image and change the text to a blue fill color.

card component hover state

Card component hover state.

card component hover state

Card component hover state.

card component hover state

Card component hover state.

Once we have this, we can customize the transition property on the primary variant if we need a slower or faster transition, and we're good to go.

Once we have this, we can customize the transition property on the primary variant if we need a slower or faster transition, and we're good to go.

Once we have this, we can customize the transition property on the primary variant if we need a slower or faster transition, and we're good to go.

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

  • Glossy black Pearl button with 3D effect and white cursor icon, showcasing modern UI design

    Pearl Button Component in Framer

    Component

    Glossy black Pearl button with 3D effect and white cursor icon, showcasing modern UI design

    Pearl Button Component in Framer

    Component

    Glossy black Pearl button with 3D effect and white cursor icon, showcasing modern UI design

    Pearl Button Component in Framer

    Component

  • 'Get started' button with blurred text effect, demonstrating animation or transition state

    Staggered Text Hover in Framer

    Component

    'Get started' button with blurred text effect, demonstrating animation or transition state

    Staggered Text Hover in Framer

    Component

    'Get started' button with blurred text effect, demonstrating animation or transition state

    Staggered Text Hover in Framer

    Component