New
New
New
Component
FAQ Accordion Component in Framer
This is a smooth FAQ accordion component built in Framer, featuring elegant text fade animations between variants. Whether you want to learn how it works or just need a quick FAQ solution for your site, feel free to grab it and make it your own.
Created by
About the resource
When you set up your accordion components by adding component variables to both the "Question" text and the "Answer" text, you can easily customize them later from the canvas through the right properties panel.
About the resource
When you set up your accordion components by adding component variables to both the "Question" text and the "Answer" text, you can easily customize them later from the canvas through the right properties panel.
About the resource
When you set up your accordion components by adding component variables to both the "Question" text and the "Answer" text, you can easily customize them later from the canvas through the right properties panel.
Component properties on the right panel.
Component properties on the right panel.
Component properties on the right panel.
By the way, creating the opening and closing interaction is pretty simple. We just have to set up two component variants: "Open" and "Close". Framer will smartly animate between the two versions of the component when we connect them with click interactions.
By the way, creating the opening and closing interaction is pretty simple. We just have to set up two component variants: "Open" and "Close". Framer will smartly animate between the two versions of the component when we connect them with click interactions.
By the way, creating the opening and closing interaction is pretty simple. We just have to set up two component variants: "Open" and "Close". Framer will smartly animate between the two versions of the component when we connect them with click interactions.
Component variants of the accordion.
Component variants of the accordion.
Component variants of the accordion.
One thing we have to keep in mind is that when animating between variants, not all properties will be animated the same way. In fact, some properties can't be smoothly animated. For example, when we're hiding the answer text on the "Close" variant, make sure to change the text's opacity to 0 instead of turning its visibility off.
The visible property only has two values: "Yes" or "No", which means there are no in-between values, so no smooth animation. On the other hand, opacity values can be 0 or 1, and anything in between.
Changing the opacity to 0 on the close variant will give us a nice fade in and out effect on the answer text.
One thing we have to keep in mind is that when animating between variants, not all properties will be animated the same way. In fact, some properties can't be smoothly animated. For example, when we're hiding the answer text on the "Close" variant, make sure to change the text's opacity to 0 instead of turning its visibility off.
The visible property only has two values: "Yes" or "No", which means there are no in-between values, so no smooth animation. On the other hand, opacity values can be 0 or 1, and anything in between.
Changing the opacity to 0 on the close variant will give us a nice fade in and out effect on the answer text.
One thing we have to keep in mind is that when animating between variants, not all properties will be animated the same way. In fact, some properties can't be smoothly animated. For example, when we're hiding the answer text on the "Close" variant, make sure to change the text's opacity to 0 instead of turning its visibility off.
The visible property only has two values: "Yes" or "No", which means there are no in-between values, so no smooth animation. On the other hand, opacity values can be 0 or 1, and anything in between.
Changing the opacity to 0 on the close variant will give us a nice fade in and out effect on the answer text.
Changing the opacity to 0 to hide the text.
Changing the opacity to 0 to hide the text.
Changing the opacity to 0 to hide the text.
