Add percentage counter to skillbars

[stijns96]

Hi there,

 

I have some skill bars on my website that I animate with TweenMax. Also I have added percentage counters by the skill bars with jQuery. But the problem that I have is that the skill bars animate when they reach a certain point and the counters not. 

 

Does anybody know how I can animate the counters at the same time as the skill bars? Preferably with TweenMax (In my opinion the most efficient way).

 

Thanks in advance!

See the Pen pYLNGr by stijns96 (@stijns96) on CodePen

[Dipscom]

Hi stijns96,

 

Welcome to the forums!

 

Yes, well, you've answered your own question, you want to join the two animations in a timeline to be triggered by ScrollMagic.

 

I've only done it in one of the skills. It's your homework to work out how to port it so that you can have the count on all skills.

 

 

See the Pen WmzOjX?editors=0010 by dipscom (@dipscom) on CodePen

 

[stijns96]

Thank you so much!

 

 

I played a little with the given code and came out with this:

 

//  Init Controller
    var controller = new ScrollMagic.Controller();
    
    $('.skillbar-container').each(function () {
        
        var skillbar = $(this).find('.skillbar-inner'),count = $(this).find('.count'),
            animateSkill = new TimelineMax(),
            level = {
            value: 0,
            endValue: count[0].innerText
        },
            animateSkill = new TimelineMax();
      

      
        animateSkill
            .to(skillbar, 1, {width: skillbar.data("width") + '%'})
            .from(count, 1, {autoAlpha: 0}, 0)
            .to(level, 1, {value: level.endValue, onUpdate: function () { count[0].innerText = Math.round(level.value) + '%'; }}, 0);

        var scene = new ScrollMagic.Scene({
            triggerElement: skillbar,
            triggerHook: 0.5,
            reverse: false
        })
            .addIndicators({
                name: 'animate skillbar'
            })

            .setTween(animateSkill).addTo(controller);
    });

 

Now it's working perfectly!

[Dipscom]

Nice one!