0

I'm using wow.js (http://mynameismatthieu.com/WOW/docs.html)

  wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       0,          // default
      mobile:       true,       // default
      live:         true        // default
    }
  )
  wow.init();

Together with ProgressBar.js (http://kimmobrunfeldt.github.io/progressbar.js)

    var circle = new ProgressBar.Circle('#skillitem1', {
    color: '#49e2d6',
    strokeWidth: 3,
    trailWidth: 0,
    duration: 1000,
    text: {
        value: '0'
    },
    step: function(state, bar) {
        bar.setText((bar.value() * 100).toFixed(0));

    }
});

However, I'm trying to find a way how the animation of ProgressBar.js will be triggered after wow's fade in effect has been done.

Any tips?

  • `wow` takes a config option of `callback`. You can set a custom `callback` function that would start the animation on the `ProgressBar.js` progress bar. Now you just need to figure out how to kick off a progress bar pragmatically and you should be set. Share what you have so far on a site like JSFiddle and you'll get better help! – Cymen Jun 18 '15 at 22:22
  • Thanks for your tip! I used wowjs callback and that's what I'm missing! – Christine Damon Jun 18 '15 at 23:15
  • Awesome! I wasn't sure if it was enough to answer it but you pulled it together which is great. I put it as an answer if you want to accept it. – Cymen Jun 18 '15 at 23:45
  • Hi Cymen, it did solved my problem. +1 – Christine Damon Jun 25 '15 at 00:08

1 Answers1

1

wow takes a config option of callback. You can set a custom callback function that would start the animation on the ProgressBar.js progress bar.

Cymen
  • 14,079
  • 4
  • 52
  • 72