Component
MAX Card Animation in Framer
Created by
Copy component
Copy component
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Component
Created by
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.
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.
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.
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
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.