Scroll Progress element – Tips & Tricks

Here are a few tips to help you customise the Scroll Progress element a little bit more.

Custom Transition

By default, the Scroll Progress transition animation is set to 0.3s with a linear easing. It's perfectly fine but there is no option to modify it.

With just one line of CSS, we can change the transition and make the animation a little more fluid.

The original effect:

With a custom transition, we can change the duration and even add an easing effect:

Select your Scroll Progress element, then add the following code for the Custom CSS (Advanced panel).

%%SELECTOR%% .bde-scroll-progress__current { transition:1s ease all }

Circular Scroll Progress

We can do the same with the circular version but the selector will be a bit different.
Example with the default version (on the left) and with some custom CSS (on the right):

%%SELECTOR%% .bde-scroll-progress__circle-svg path { transition:0.6s cubic-bezier(0.34, 1.56, 0.64, 1) stroke-dashoffset!important }

More customization

Basically, the animation is a simple transition from 0 to 100% of the width.

In the following trick, we will use the scale() function (of the transform CSS property) instead of the width. So we can have the same effect as the Scroll Progress at the bottom of this page.

%%SELECTOR%% .bde-scroll-progress__current { width: 100%; transform: scalex(var(--bde-scroll-progress-current)); transition:0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }