[Add percentage counter to skillbars]

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!

[Add percentage counter to skillbars]

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