How to Create Animated Bars in Framer

How to Create Animated Bars in Framer

New

New

New

  • Guide

  • Animated
  • Bars
  • Guide

  • Animated
  • Bars
  • Guide

  • Animated
  • Bars

How to Create Animated Bars in Framer

In this guide, I’ll show you how to animate a plain static bar in Framer, no code needed. From creating the layout to adding a number counter and smooth animations, I’ll walk you through the whole thing step-by-step.

image of Nandi Muzsik

Posted by

Nandi

Minimalist animated progress bar displaying 38% completion with rounded corners and gradient fill on a dark background
Minimalist animated progress bar displaying 38% completion with rounded corners and gradient fill on a dark background
Minimalist animated progress bar displaying 38% completion with rounded corners and gradient fill on a dark background

Table of contents

How it started

The other day someone asked me, “Nandi, how do i make this progress bar animated?” And I thought, great question.

Turns out, it’s super simple. You don’t need any code, and the result looks slick. So let me show you exactly how I turned a static bar into an animated masterpiece in just a few steps.

How it started

The other day someone asked me, “Nandi, how do i make this progress bar animated?” And I thought, great question.

Turns out, it’s super simple. You don’t need any code, and the result looks slick. So let me show you exactly how I turned a static bar into an animated masterpiece in just a few steps.

How it started

The other day someone asked me, “Nandi, how do i make this progress bar animated?” And I thought, great question.

Turns out, it’s super simple. You don’t need any code, and the result looks slick. So let me show you exactly how I turned a static bar into an animated masterpiece in just a few steps.

Animated bars in Framer.

Animated bars in Framer.

Animated bars in Framer.

Draw the frame

First, start with the basics. Draw a Frame that’s going to act as your outer bar, the container.

Inside that, add another Frame which will be your progress bar (the one that will animate). This inner bar should be:

  • Pinned to the left, top, and bottom

  • Set to a relative width, using a percentage

For example, you might start at 0% and later animate to something like 67%.

Add text and a counter

Above the bar, add a title like “Progress” or “Skill Level.” Whatever fits your layout really.

Below the bar, add a number counter. Just use my animated number counter from Framer University.

Draw the frame

First, start with the basics. Draw a Frame that’s going to act as your outer bar, the container.

Inside that, add another Frame which will be your progress bar (the one that will animate). This inner bar should be:

  • Pinned to the left, top, and bottom

  • Set to a relative width, using a percentage

For example, you might start at 0% and later animate to something like 67%.

Add text and a counter

Above the bar, add a title like “Progress” or “Skill Level.” Whatever fits your layout really.

Below the bar, add a number counter. Just use my animated number counter from Framer University.

Draw the frame

First, start with the basics. Draw a Frame that’s going to act as your outer bar, the container.

Inside that, add another Frame which will be your progress bar (the one that will animate). This inner bar should be:

  • Pinned to the left, top, and bottom

  • Set to a relative width, using a percentage

For example, you might start at 0% and later animate to something like 67%.

Add text and a counter

Above the bar, add a title like “Progress” or “Skill Level.” Whatever fits your layout really.

Below the bar, add a number counter. Just use my animated number counter from Framer University.

Animated number counter component.

Animated number counter component.

Animated number counter component.

This will show the actual number value of the progress bar, like 67.

Turn it into a component

Once your layout looks good, select everything and turn it into a component. This is where the magic starts.

This will show the actual number value of the progress bar, like 67.

Turn it into a component

Once your layout looks good, select everything and turn it into a component. This is where the magic starts.

This will show the actual number value of the progress bar, like 67.

Turn it into a component

Once your layout looks good, select everything and turn it into a component. This is where the magic starts.

Turning your bar into a component.

Turning your bar into a component.

Turning your bar into a component.

Create two variants:

Default Variant

  • Inner bar width: 0%

  • Number counter: 0 (set to variant mode)

Animated Variant

  • Inner bar width: whatever percent you want, like 67%

  • Number counter: 67

Now your component is set up with a before and after state. All that’s left is the animation.

Animate on scroll

To make the animation happen when the bar enters the viewport:

  • Select your component

  • Go to Effects

  • Add a Scroll Variant

  • Choose Layer in View as the trigger

And that’s it. Now, when someone scrolls down the page and your bar comes into view, it animates smoothly from 0% to your target percentage, with the number ticking up to match.

Final result

You’ve now taken a static progress bar and made it come alive, all without writing a single line of code.

Use this for skills, stats, progress indicators, or anywhere you want to show dynamic data with a bit of flair. It’s clean, it’s engaging, and it adds that extra layer of polish to your site.

If you haven’t tried this yet, give it a go. It’s one of those little tricks that makes a big difference.

Create two variants:

Default Variant

  • Inner bar width: 0%

  • Number counter: 0 (set to variant mode)

Animated Variant

  • Inner bar width: whatever percent you want, like 67%

  • Number counter: 67

Now your component is set up with a before and after state. All that’s left is the animation.

Animate on scroll

To make the animation happen when the bar enters the viewport:

  • Select your component

  • Go to Effects

  • Add a Scroll Variant

  • Choose Layer in View as the trigger

And that’s it. Now, when someone scrolls down the page and your bar comes into view, it animates smoothly from 0% to your target percentage, with the number ticking up to match.

Final result

You’ve now taken a static progress bar and made it come alive, all without writing a single line of code.

Use this for skills, stats, progress indicators, or anywhere you want to show dynamic data with a bit of flair. It’s clean, it’s engaging, and it adds that extra layer of polish to your site.

If you haven’t tried this yet, give it a go. It’s one of those little tricks that makes a big difference.

Create two variants:

Default Variant

  • Inner bar width: 0%

  • Number counter: 0 (set to variant mode)

Animated Variant

  • Inner bar width: whatever percent you want, like 67%

  • Number counter: 67

Now your component is set up with a before and after state. All that’s left is the animation.

Animate on scroll

To make the animation happen when the bar enters the viewport:

  • Select your component

  • Go to Effects

  • Add a Scroll Variant

  • Choose Layer in View as the trigger

And that’s it. Now, when someone scrolls down the page and your bar comes into view, it animates smoothly from 0% to your target percentage, with the number ticking up to match.

Final result

You’ve now taken a static progress bar and made it come alive, all without writing a single line of code.

Use this for skills, stats, progress indicators, or anywhere you want to show dynamic data with a bit of flair. It’s clean, it’s engaging, and it adds that extra layer of polish to your site.

If you haven’t tried this yet, give it a go. It’s one of those little tricks that makes a big difference.

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 posts

More posts

  • Minimalist effects button with blue spark icon, labeled 'Effects' and a close icon, on a dark background

    A Guide to Not Overdoing Framer Effects 

    Guide

    Minimalist effects button with blue spark icon, labeled 'Effects' and a close icon, on a dark background

    A Guide to Not Overdoing Framer Effects 

    Guide

    Minimalist effects button with blue spark icon, labeled 'Effects' and a close icon, on a dark background

    A Guide to Not Overdoing Framer Effects 

    Guide

  • Transformation of a flat white letter 'R' into a 3D red textured 'R' with wavy stripes, demonstrating 3D asset creation and design enhancement

    Creating 3D Assets for Framer Websites with ChatGPT-4o

    Guide

    Transformation of a flat white letter 'R' into a 3D red textured 'R' with wavy stripes, demonstrating 3D asset creation and design enhancement

    Creating 3D Assets for Framer Websites with ChatGPT-4o

    Guide

    Transformation of a flat white letter 'R' into a 3D red textured 'R' with wavy stripes, demonstrating 3D asset creation and design enhancement

    Creating 3D Assets for Framer Websites with ChatGPT-4o

    Guide

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