Animating number

[zureshm]

Hi, I want to do animating a number during tweening.

I am using the jQuery way

See the Pen bjdiK by anon (@anon) on CodePen

but is there an easy GSAP way so that I can controll the animation using the slider?
I am a beginner
 

[jamiejefferson]

Sure, here's the same thing done with GSAP:

 

See the Pen bmsED?editors=101 by jamiejefferson (@jamiejefferson) on CodePen

TweenLite.to({ d: 110 }, 2, {
  d: 90,
  roundProps: 'd',
  ease: Linear.easeNone,
  onUpdate: function() {
    $("#gsapBox").html(this.target.d);
  }
});

Check out the intro materials at http://www.greensock.com/get-started-js/, and especially the Jump Start if you you're still getting your feet wet.

 

 

Also I'm not sure if that number tween was all you meant by a slider, or if you were after controls as well? Anyway if you need it, here's an example of a GreenSock animation being controlled by a jQuery slider:

 

See the Pen AwCKp by GreenSock (@GreenSock) on CodePen

[zureshm]

Wow.. thanks for the very quick reply

[zureshm]

But it is not working when used in timeline

See the Pen iLtBc by anon (@anon) on CodePen

[jamiejefferson]

It's just a sneaky t1.to(...) instead of tl.to(...) 

[zureshm]

thanks.. I hope I will never make this mistake again