Jump to content
GreenSock

stijns96

Add percentage counter to skillbars

Recommended Posts

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

Link to comment
Share on other sites

  • stijns96 changed the title to Add percentage counter to skillbars

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

 

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×