FAQ Accordion Component in Framer

Copy component

FAQ Accordion Component 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

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.

image of Nandi Muzsik

Created by

FAQ accordion menu with multiple questions about Framer website
FAQ accordion menu with multiple questions about Framer website
FAQ accordion menu with multiple questions about Framer website

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.

Framer component settings panel showing accordion configuration options

Component properties on the right panel.

Framer component settings panel showing accordion configuration options

Component properties on the right panel.

Framer component settings panel showing accordion configuration options

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.

Framer interface showing expandable FAQ question component in dark mode

Component variants of the accordion.

Framer interface showing expandable FAQ question component in dark mode

Component variants of the accordion.

Framer interface showing expandable FAQ question component in dark mode

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.

Framer design interface with style controls and properties panel

Changing the opacity to 0 to hide the text.

Framer design interface with style controls and properties panel

Changing the opacity to 0 to hide the text.

Framer design interface with style controls and properties panel

Changing the opacity to 0 to hide the text.

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

  • Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

    Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

    Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

  • 3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component

    3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component

    3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component