Okay
  Public Ticket #1443308
Stats / Tween
Closed

Comments

  •  1
    Carlhussey started the conversation
    January 24, 2018 at 2:10am

    I am using the dashboard page in my application which contains several of the Titles that use the data-end to count up to the final value.

    This worked fine when I was populating the data via PHP as it was there before the JS triggered the tween plugin.

    I have since switched to an AJAX style setup on that page so I can refresh the data dynamically at a set interval.

    When I load the data, I am setting the value like so:

    $('#totalCustomers').attr('data-end',data.general.totalCustomers);

    I see this value get updated in the source to data-end="123" which is correct.

    My issue / question is that the tween / count up doesn't get triggered on this so the visual display still shows 0.

    Is there a way I can manually call this "Tween" method so that it will re-animate based on values that it now has?

  • [deleted] replied
    January 24, 2018 at 10:04am

    Hi Carlhussey,

    I get the point here. Actually in the current version doesn't has this feature implemented but I will help you to implement it.

    1. Add the following code to your custom JS file:

    // Animate tile
function animateTileCounter( el, start, end ) {
    var $this = $(el),
        $num = $this.find('.num'),
        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)
    {
        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);
            }
        });
    }
}

    2. Then right after you get different value you can re-animate it again, as an example:

    var current = $( '#totalCustomers' ).attr( 'data-end' );
animateTileCounter( '#totalCustomers', current, data.general.totalCustomers );

    I hope this will work for you

  •  1
    Carlhussey replied
    January 25, 2018 at 3:50pm

    This is amazing. I truly appreciate the support I have received from you so far. Especially in a situation like this where you want out of your way to share something that was built in to your original product.

    I look forward to checking out your other products, just to I know I am in good hands with support if anything were to ever come up :)

    Thanks again, this worked great!

  • [deleted] replied
    January 26, 2018 at 7:34am

    You're welcome Carlhussey

    P.S: If you like our theme, it would help us a lot if you could give us five star rating on themeforest from your Downloads tab.

    A huge thank you from Laborator in advance and have a great weekend!