A better Progress Bar with GSAP

You have probably noticed that when you enable the animation for the Progress Bar element, only the 'bar' is animated. Not the number!

GSAP to the rescue

Once again, we are going to use GSAP to take care of all the animation, and animate the number too.

The full code

Don't forget to load the GSAP libs (see here for more info), then paste this code in a Code Block.

document.addEventListener("DOMContentLoaded", function() {

    const pbar = document.querySelectorAll('.oxy-progress-bar');
    pbar.forEach((element) => {

        const w = element.querySelector('.oxy-progress-bar-progress-wrap');
        const p = element.querySelector('.oxy-progress-bar-overlay-percent');

        const target = p.textContent;

        const pbtl = gsap.timeline({
            defaults: {
                duration: 4,
                ease: "bounce.out"
            },
            scrollTrigger: {
                trigger: element,
                toggleActions: "play pause resume reset"
            }
        });

        pbtl.fromTo(w, { width: 0 }, {
            width: target,
        });
        pbtl.from(p, {
            textContent: 0 + "%",
            snap: { textContent: 1 },
        }, "<");
    })

});