Jump to content
GreenSock

zureshm

Animating number

Recommended Posts

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 :(
 

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

Wow.. thanks for the very quick reply :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

:oops:
thanks.. I hope I will never make this mistake again :)

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