Jump to content
GreenSock

stijns96

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by stijns96

  1. 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!

  2. 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

×