Storyline Progress Bar Animation - Looking for Ideas

Thank you all! Those progress bars look so good. I do not know how to use Java script or the slider - is there a tutorial you recommend that shows how to use java script to create the progress bar and/or a slider?

NRPSupport​ And my favorite one: one running at the top of the Storyline player. Simple, elegant, out of the way, and doing exactly what it’s supposed to do.

NRPSupport​ 

If I need to, I also use a JavaScript-animated progress bar. There are many ways to build a progress bar, but most of what I’ve seen so far uses JavaScript. The built-in way would look similar to what you were trying to build with single images, but it would require creating additional states, where each state represents a certain point in the overall progress bar. This could become a tedious and time-consuming process, especially if your project grows from 4 slides to 20 slides or so. You would then have to readjust the progress bar states, adding more or removing existing ones, etc.

Another good practice is to have the progress bar running on a Slide Master rather than having a separate progress bar instance on each slide. Having the progress bar on a Slide Master would allow for better visibility, maintainability, and an easier overall editing process, while ensuring that every slide using that master has a progress bar visible. In my personal opinion, I don’t think a progress bar should look too fancy. I personally prefer a simple, static progress bar running at the top of the player rather than having it directly on the slide itself. Anyway, I have two examples of progress bars for you.

The first is a static one using a modified Storyline Slider element. The left side of the slider track represents the progress made, while the portion ahead of the slider knob represents the remaining progress. It aligns with your original concept and general idea of having a progress knob. The slider itself should be disabled in its initial state.

The second example is a simple line with a thicker width and another line underneath it acting as the progress bar holder. This one is animated with GSAP (a JavaScript animation library) and can easily be adjusted to match any color or design.

Let me know if you’re comfortable with a JavaScript-based solution for the progress bar or if you would prefer a more built-in approach. I can upload both Storyline files with either option.

SLIDER

ANIMATED LINE

I've checked out your file, and I see the hangup with this particular implementation as a Wipe issue. When a new slide begins, the entire bar that Picture 3 represents is wiping from left to right. For that .5 second, the circular tip disappears because it hasn't wiped in yet. To see more visually, recolor the top progress bar picture on a slide to something like orange:

Then when you preview the slide, you'll see better how the orange bar wipes in on top of the blue bar.

I think the effect you're going for would require something like cropping Picture 3 down to only the length of the increase, not including the existing progress, and animate that from its left position on the prior slide to the new position on the right. Copy-and-paste.

I've fiddled with using Storyline's built-in sliders as progress bars as well as animating one rectangle on top of another with JavaScript. That method allows for smoother animations but isn't for every project. 

You might dig in the community with a search.  Or there may be some ideas in the Challenges to help you.

How are Designers Using Progress Bars in E-Learning? (2019) #224 | E-Learning Heroes

You're in great hands with Phil too though.  ;)

For progress bars I use a JS animation. I will see if I can find some examples to post