Component
Testimonials Carousel in Framer
This testimonials carousel is a Framer recreation of Mery’s work. Play around with it, explore how it’s put together, or remix the project to make it your own.
Created by
About the resource
To create something like this in Framer, you have to break it up into multiple components with variants. For example, we can see that on the left, images are moving in a grid, so that can be its own component with three variants.
Then we have the texts on the right. That can also be turned into a component with three variants, one for each testimonial. Within this component, we can set up these text layers in a way that they're going to be animated how we want them to be animated.
Once we have these groups as components, we can wrap them in one main "Testimonials" component and create the final variants. On each variant, we switch the variants of the inner components to display different images in the grid and text in the text stack. To move between these variants when clicking the arrows, we just connect interactions from the arrows themselves. That's it!
About the resource
To create something like this in Framer, you have to break it up into multiple components with variants. For example, we can see that on the left, images are moving in a grid, so that can be its own component with three variants.
Then we have the texts on the right. That can also be turned into a component with three variants, one for each testimonial. Within this component, we can set up these text layers in a way that they're going to be animated how we want them to be animated.
Once we have these groups as components, we can wrap them in one main "Testimonials" component and create the final variants. On each variant, we switch the variants of the inner components to display different images in the grid and text in the text stack. To move between these variants when clicking the arrows, we just connect interactions from the arrows themselves. That's it!
About the resource
To create something like this in Framer, you have to break it up into multiple components with variants. For example, we can see that on the left, images are moving in a grid, so that can be its own component with three variants.
Then we have the texts on the right. That can also be turned into a component with three variants, one for each testimonial. Within this component, we can set up these text layers in a way that they're going to be animated how we want them to be animated.
Once we have these groups as components, we can wrap them in one main "Testimonials" component and create the final variants. On each variant, we switch the variants of the inner components to display different images in the grid and text in the text stack. To move between these variants when clicking the arrows, we just connect interactions from the arrows themselves. That's it!
The variants of the main "Testimonials" component.
The variants of the main "Testimonials" component.
The variants of the main "Testimonials" component.
