Jump to content
GreenSock

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

Animating a number count using DOM element

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there

 

I am trying to setup an animated score count effect. I want the number to be a variable with the number value taken from a div (the div takes the value from user generated data via XML-XSL transformation). It's a percentage so scores of 1 - 100 only. I'm also trying to create a loader effect where a div container's background colour is filled up using the same percentage value.

 

I have a jQuery solution but would like to use GSAP if possible. Any ideas on where to start with this? Should I be looking at setting this up as a Timeline with the value linked to something like 'totalProgress()' as in the demo?

 

Many thanks for any help

Link to comment
Share on other sites

this should get you started with tweening a variable. 

http://codepen.io/GreenSock/pen/hzfji

 

you can use the tweened value however you like, display it as text, use it as an opacity value or the width or scale of a div.

  • Like 1
Link to comment
Share on other sites

Many thanks Carl,

 

This example works fine, one question though, how would I tween the value of var startScore (which is set 0), to var endScore (which is contained in a DOM element)?

Link to comment
Share on other sites

I don't follow exactly what you mean by endScore is a variable contained in a DOM element

 

var endScore = //retrieve the value from your DOM element

var game = {score:0},
scoreDisplay = $("#score");
 
//use endScore as the end value of your tween
TweenLite.to(game, 0.5, {score:endScore, roundProps:"score", onUpdate:updateHandler});
Link to comment
Share on other sites

That's it exactly it, need to retrieve the value of the end score which is unknown until it's added to the DOM following the xsl transformation, but rather than display it statically I'd like to animate from 0 to the end value. Not sure if this is declared as a variable or not?

Link to comment
Share on other sites

<div id="score">0</div>
<div alias="N30" class="wellness-score">63</div>
        var endScore = $(".wellness-score").data(); 
        var startScore = {score:0},
                scoreDisplay = $("#score");

        //use endScore as the end value of your tween
                    
        $(window).load(function(){
                TweenLite.to(endScore, 5, {score:startScore, roundProps:"score", onUpdate:updateHandler});
        }); 
                
        function updateHandler() {
                scoreDisplay.text(startScore.score);
        }

This is the code I have so far with an example of a value supplied in the DOM within the class "wellness-score". I've tried to use a data method but nothing happens. 

Link to comment
Share on other sites

Hi

 

Just a simple syntax issue. What you have to tween is the startScore object, and it's score property, like this:

 

$(window).load(function(){

TweenLite.to(startScore, 5, {score:endScore, roundProps:"score", onUpdate:updateHandler});

});

 

Like that the start score will tween from zero (starting value) to the value you'll get for the end score.

In this cases you have to tween the numeric property of a key:value pair of an object, in your case startScore and it key value pair score:0.

 

Hope this helps

Cheers

Rodrigo

Link to comment
Share on other sites

Hi Rodrigo

 

Many thanks for your help but still no joy? Have switched the objects around but still no tween. Any other suggestions?

Link to comment
Share on other sites

Hi,
 
I believe that the problem is due to how you're using JQuery's data() method.
 
The thing is that is data() works with a key and the data for that particular key. So in this case it should be the data from the DIV element, like this:

$(".wellness-score").data('endScore',$(".wellness-score").text());

And then you have to use it inside the engine's constructor, like this:

TweenLite.to(startScore, 5, {score:$(".wellness-score").data('endScore'), roundProps:"score", onUpdate:updateHandler});
});

Also you could store the specific data in a variable and pass the latter to the constructor, like this:

var value = $(".wellness-score").data('endScore');

TweenLite.to(startScore, 5, {score:value, roundProps:"score", onUpdate:updateHandler});
}); 

As you can see it becomes a little cumbersome which led me to ask you the following: how necessary is to use the data() method?, can you store the value in a variable and then pass the variable to the constructor?. Since you're using XML to retrieve your data I'm going to presume that you're using an ajax call, that has a complete callback which you could use to store the data in a variable each time the ajax is executed. Well just my two cents in that matter.

 

Wrapping up give this code a try and let us know:

var startScore = {score:0},
    scoreDisplay = $("#score"),
    wellness = $("div.wellness-score");

wellness.data('endScore', wellness.text());

$(window).load(function()
{
    TweenLite.to(startScore, 5, {score:wellness.data('endScore'), roundProps:"score", onUpdate:updateHandler});
}); 
                
function updateHandler()
{
    scoreDisplay.text(startScore.score);
}

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

HI Rodrigo,

 

Many thanks for your help. This does work now, but would prefer to store the value as a variable like you say, without the data method. The value in the XML file is serialized via XSL transformation, not Ajax so it already resides in the DOM on page load, I just wanted to animate the number, so I've hidden the value in 'wellness-score' using css, and want to pass it to display #score - at least that was the original thinking. 

 

If you have any other suggestions that would be awesome! 

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