Fluid Steps Animation in Framer

Copy component

Fluid Steps Animation in 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

Fluid Steps Animation in Framer

This is a full recreation of a fluid steps animation in Framer, originally created by Zero. Feel free to copy the component to your project and use it for progress indicators or onboarding flows, or remix the project to explore how it’s built in Framer.

image of Nandi Muzsik
Image of Zero
image of Prianca S.

Created by

Blue 'Continue' button on a dark background with a cursor icon indicating a click action
Blue 'Continue' button on a dark background with a cursor icon indicating a click action
Blue 'Continue' button on a dark background with a cursor icon indicating a click action

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.

Three-step interactive tutorial navigation with 'Continue', 'Back', and 'Finish' buttons on a dark background

The three variants of the steps component.

Three-step interactive tutorial navigation with 'Continue', 'Back', and 'Finish' buttons on a dark background

The three variants of the steps component.

Three-step interactive tutorial navigation with 'Continue', 'Back', and 'Finish' buttons on a dark background

The three variants of the steps component.

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

  • Text 'Animated Gradients' over a dynamic blue gradient background

    Animated Gradient Background in Framer

    Component

    Text 'Animated Gradients' over a dynamic blue gradient background

    Animated Gradient Background in Framer

    Component

    Text 'Animated Gradients' over a dynamic blue gradient background

    Animated Gradient Background in Framer

    Component

  • An elegant user interface showcases the iPadOS pointer cursor within the Framer platform, emphasizing options to remix the project, copy the component, or seek inspiration, all set against a captivating deep blue gradient background

    iPadOS Pointer Cursor in Framer

    Component

    An elegant user interface showcases the iPadOS pointer cursor within the Framer platform, emphasizing options to remix the project, copy the component, or seek inspiration, all set against a captivating deep blue gradient background

    iPadOS Pointer Cursor in Framer

    Component

    An elegant user interface showcases the iPadOS pointer cursor within the Framer platform, emphasizing options to remix the project, copy the component, or seek inspiration, all set against a captivating deep blue gradient background

    iPadOS Pointer Cursor in Framer

    Component