Bubble FAQ Component for Framer

Copy component

Bubble FAQ Component for 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

Bubble FAQ Component for Framer

This is a Framer recreation of the fun FAQ concept originally created by Fons. I remixed his idea to show how it can be improved slightly. Feel free to copy the component to your website, or remix the project to see how it's built.

image of Nandi Muzsik
profile image of Fons Mans

Created by

Bubble FAQ Component for Framer
Bubble FAQ Component for Framer
Bubble FAQ Component for Framer

Related Lesson

Watch now

Related Lesson

Watch now

Related Lesson

Watch now

About the resource

When I first saw the interaction, the first thing I thought was: "Wow, this is a cool idea!" and then "Wait, this could be improved."

If you take a closer look at Fons' original design, you can see that when a message is clicked, other messages are jumping up and down as they're pushed away. The problem is that they change position instantly and without any animation.

About the resource

When I first saw the interaction, the first thing I thought was: "Wow, this is a cool idea!" and then "Wait, this could be improved."

If you take a closer look at Fons' original design, you can see that when a message is clicked, other messages are jumping up and down as they're pushed away. The problem is that they change position instantly and without any animation.

About the resource

When I first saw the interaction, the first thing I thought was: "Wow, this is a cool idea!" and then "Wait, this could be improved."

If you take a closer look at Fons' original design, you can see that when a message is clicked, other messages are jumping up and down as they're pushed away. The problem is that they change position instantly and without any animation.

The instant position change of messages.

The instant position change of messages.

The instant position change of messages.

When we're creating interactions in Framer without writing any code, it's pretty easy to solve these kinds of issues.

The way most interactions are created in Framer is by creating components, then making variants of that component, and switching between them with different triggers (appear, click, hover, etc.).

In this case, we have a Question Row component that has an Only Question and a Show Answer variant. We're clicking this component to switch between those two variants with a nice transition.

Important: only elements that are part of the component will be animated nicely.

As we open this Question Row component with a click, other elements get pushed up and down on the page, and since they're not part of the component, they won't be animated.

To fix this, we just have to wrap all Question Row components in a common stack and turn that into a component.

When we're creating interactions in Framer without writing any code, it's pretty easy to solve these kinds of issues.

The way most interactions are created in Framer is by creating components, then making variants of that component, and switching between them with different triggers (appear, click, hover, etc.).

In this case, we have a Question Row component that has an Only Question and a Show Answer variant. We're clicking this component to switch between those two variants with a nice transition.

Important: only elements that are part of the component will be animated nicely.

As we open this Question Row component with a click, other elements get pushed up and down on the page, and since they're not part of the component, they won't be animated.

To fix this, we just have to wrap all Question Row components in a common stack and turn that into a component.

When we're creating interactions in Framer without writing any code, it's pretty easy to solve these kinds of issues.

The way most interactions are created in Framer is by creating components, then making variants of that component, and switching between them with different triggers (appear, click, hover, etc.).

In this case, we have a Question Row component that has an Only Question and a Show Answer variant. We're clicking this component to switch between those two variants with a nice transition.

Important: only elements that are part of the component will be animated nicely.

As we open this Question Row component with a click, other elements get pushed up and down on the page, and since they're not part of the component, they won't be animated.

To fix this, we just have to wrap all Question Row components in a common stack and turn that into a component.

wrapping all elements in a component

Wrapping all involved elements into a common component.

wrapping all elements in a component

Wrapping all involved elements into a common component.

wrapping all elements in a component

Wrapping all involved elements into a common component.

Now, we'll have a main component that has all elements involved in the animation, and we can tweak the transition property on the right panel to fine-tune the animation.

So with this simple fix, we've made sure that we have a nice interaction that doesn't have any weird jumps or instant position changes, and everything animates nicely.

Now, we'll have a main component that has all elements involved in the animation, and we can tweak the transition property on the right panel to fine-tune the animation.

So with this simple fix, we've made sure that we have a nice interaction that doesn't have any weird jumps or instant position changes, and everything animates nicely.

Now, we'll have a main component that has all elements involved in the animation, and we can tweak the transition property on the right panel to fine-tune the animation.

So with this simple fix, we've made sure that we have a nice interaction that doesn't have any weird jumps or instant position changes, and everything animates nicely.

The final interaction with smooth animations.

The final interaction with smooth animations.

The final interaction with smooth animations.

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