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)

Share this post


Link to post
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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×