Hello, I am trying to change dynamically the attribute data-end. As I get it from the server. I can’t figure out how to do it the right way so the animation will still work. Can you please help out? Thanks in advance, Eitan. <div class="tile-stats tile-green"> <div class="icon"><i class="entypo-chart-bar" /></div> <div class="num" data-start="0" data-end="135" data-postfix="" data-duration="1000" data-delay="0">0</div>
<h3>Daily Visitors</h3> <p>this is the average value.</p> </div>
Actually these "counter" widgets are initiated in Document start and to re-initialize again you need to create a function to start the animation again so here is the code for tile counter:
Hello, I am trying to change dynamically the attribute data-end. As I get it from the server. I can’t figure out how to do it the right way so the animation will still work. Can you please help out? Thanks in advance, Eitan.
<div class="tile-stats tile-green">
<div class="icon"><i class="entypo-chart-bar" /></div>
<div class="num" data-start="0" data-end="135" data-postfix="" data-duration="1000" data-delay="0">0</div>
<h3>Daily Visitors</h3><p>this is the average value.</p>
</div>
Hello Eitan,
Actually these "counter" widgets are initiated in Document start and to re-initialize again you need to create a function to start the animation again so here is the code for tile counter:
(view large version)
in neon-custom.js starting from line 1237 so here is an example:
function countableElement( el ) {
var $this = $(el),
$num = $this.find('.num'),
start = attrDefault($num, 'start', 0),
end = attrDefault($num, 'end', 0),
prefix = attrDefault($num, 'prefix', ''),
postfix = attrDefault($num, 'postfix', ''),
duration = attrDefault($num, 'duration', 1000),
delay = attrDefault($num, 'delay', 1000),
format = attrDefault($num, 'format', false);
if(start < end)
{
if(typeof scrollMonitor == 'undefined')
{
$num.html(prefix + end + postfix);
}
else
{
var tile_stats = scrollMonitor.create( el );
tile_stats.fullyEnterViewport(function(){
var o = {curr: start};
TweenLite.to(o, duration/1000, {curr: end, ease: Power1.easeInOut, delay: delay/1000, onUpdate: function()
{
$num.html(prefix + (format ? numberWithCommas( Math.round(o.curr) ) : Math.round(o.curr)) + postfix);
}
});
tile_stats.destroy()
});
}
}
}