New
New
New
Component
Waitlist Social Proof Animation in Framer
This is a tiny social proof animation that you can use under forms, buy buttons, or basically anything that needs social proof. It was recreated based on Praha's original work. Feel free to remix the project to see how a continuously looping animation like this is created in Framer without any coding.
Created by
About the resource
This animation was created with the looping method. The trick is that we set up the same images 2x. We have a set waiting to come in from the left, and the second set is what we see by default.
About the resource
This animation was created with the looping method. The trick is that we set up the same images 2x. We have a set waiting to come in from the left, and the second set is what we see by default.
About the resource
This animation was created with the looping method. The trick is that we set up the same images 2x. We have a set waiting to come in from the left, and the second set is what we see by default.
The structure of the component.
The structure of the component.
The structure of the component.
Once we have this setup, we just create a few variants, and on each we introduce a new image from the “waiting” set, and move one to the side from the “active” set.
Once we have this setup, we just create a few variants, and on each we introduce a new image from the “waiting” set, and move one to the side from the “active” set.
Once we have this setup, we just create a few variants, and on each we introduce a new image from the “waiting” set, and move one to the side from the “active” set.
The component variants of the animation.
The component variants of the animation.
The component variants of the animation.
When all variants of the animation are set up, we can connect between them with appear triggered interactions with sufficient delay. This essentially means that the the component will be continuously and animating between its variants, in a fully automatic way.
There’s one last trick here, you need to make sure that the first and last variants are completely matching visually, and the primary variant should have instant transition.
If you’re thinking about how I created the overlapping images, check out this resource. Or if you’re wondering how the hell is that number animating in such a nice way, check out this component. And finally, if you wanna learn more about this “looping method” in Framer, make sure to check out this tutorial.
When all variants of the animation are set up, we can connect between them with appear triggered interactions with sufficient delay. This essentially means that the the component will be continuously and animating between its variants, in a fully automatic way.
There’s one last trick here, you need to make sure that the first and last variants are completely matching visually, and the primary variant should have instant transition.
If you’re thinking about how I created the overlapping images, check out this resource. Or if you’re wondering how the hell is that number animating in such a nice way, check out this component. And finally, if you wanna learn more about this “looping method” in Framer, make sure to check out this tutorial.
When all variants of the animation are set up, we can connect between them with appear triggered interactions with sufficient delay. This essentially means that the the component will be continuously and animating between its variants, in a fully automatic way.
There’s one last trick here, you need to make sure that the first and last variants are completely matching visually, and the primary variant should have instant transition.
If you’re thinking about how I created the overlapping images, check out this resource. Or if you’re wondering how the hell is that number animating in such a nice way, check out this component. And finally, if you wanna learn more about this “looping method” in Framer, make sure to check out this tutorial.
