Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
wearetangerine

Number animation

Recommended Posts

Hi everyone,

 

I was wondering if anyone could help me. I am planning on creating some infographics on a website when once scrolled to on the page, the animation will kick in. I am able to create scroll based animations however I cannot seem to create an animation that will count a number from zero to a given number on the page.

 

Does anyone have any experience of this and if so, could you point me in the right direction?

 

Many Thanks,

Mark (wearetangerine)

Link to comment
Share on other sites

Hi wearetangerine :)

 

as you can read in Doc. : 

 

A TweenLite instance handles tweening one or more properties of any object (or array of objects) over time

 

so , pls check this out : 

See the Pen wabEyg by MAW (@MAW) on CodePen

Link to comment
Share on other sites

  • 1 year later...

Hello Diaco and Greensock,

If it was an array of the alphabet, how could I tell it to scroll through like that animation but stop at a predetermined given value?

I'm trying to do a slot machine type effect that spells out different words each time the user hits the button.

Some how I would use an array of the alphabet string?

 

Thanks

Link to comment
Share on other sites

Hi @wpsenior,

 

Answered questions might get overlooked so it's better to ask a new question.

 

Arrays are objects, so animating them works same. Add your alphabet to an array, and you can lookup values based on the index.

See the Pen 377fe679af578c0a1dd673f71626d14e?editors=0010 by osublake (@osublake) on CodePen

 

.

  • Like 5
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.
×