Component
Fluid Steps Animation in Framer
About the resource
To create the fluid steps component, I set up three variants, each representing a step in the animation. Each variant contains a stack that nests the dot frames, with the background frame also included within the stack. The background frame is set to an absolute position and dynamically expands as the steps progress.
In the buttons stack, the back button starts in an absolute position and switches to relative in the second step. The tick icon changes from opacity 0 to 1 in Step 3, also scaling from 0.7 to 1 during the opacity change in the final step.
The on-click interactions for the continue and back buttons are directly linked to navigate through the steps. This setup creates smooth, interactive transitions between the steps, all without any code, thanks to Framer’s intuitive tools.
About the resource
To create the fluid steps component, I set up three variants, each representing a step in the animation. Each variant contains a stack that nests the dot frames, with the background frame also included within the stack. The background frame is set to an absolute position and dynamically expands as the steps progress.
In the buttons stack, the back button starts in an absolute position and switches to relative in the second step. The tick icon changes from opacity 0 to 1 in Step 3, also scaling from 0.7 to 1 during the opacity change in the final step.
The on-click interactions for the continue and back buttons are directly linked to navigate through the steps. This setup creates smooth, interactive transitions between the steps, all without any code, thanks to Framer’s intuitive tools.
About the resource
To create the fluid steps component, I set up three variants, each representing a step in the animation. Each variant contains a stack that nests the dot frames, with the background frame also included within the stack. The background frame is set to an absolute position and dynamically expands as the steps progress.
In the buttons stack, the back button starts in an absolute position and switches to relative in the second step. The tick icon changes from opacity 0 to 1 in Step 3, also scaling from 0.7 to 1 during the opacity change in the final step.
The on-click interactions for the continue and back buttons are directly linked to navigate through the steps. This setup creates smooth, interactive transitions between the steps, all without any code, thanks to Framer’s intuitive tools.
The three variants of the steps component.
The three variants of the steps component.
The three variants of the steps component.
