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.
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 involved elements into a common component.
Wrapping all involved elements into a common 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.
