[Update a staggered array of numbers with OnUpdate]

1 hour ago, OSUblake said:

textContent

Oh man, I spent so long last night looking for this. I think it’d be a good section or page in the documentation, if that’s on the table. I’m curious why this works but innerHtml needs the intermediate onUpdate step as well.

[Update a staggered array of numbers with OnUpdate]

Hey, thanks for looking at this! Wow, yes, that's exactly what I was trying to accomplish. I clearly did not understand several things here. a) I do need to be tweening the values, not the elements, b) I don't need to create a fancy object structure for current values, just use an array of numbers, c) I can't just pass gsap.utils.wrap() in as end values; I need to return the right value myself given the index, d) I should be looping through all the targets on onUpdate instead of in stagger{onUpdate = function() {}, and e) getting the syntax right for this.targets(). And updating this site to gsap 3 syntax and setting up a transpiler so I can use ES6.  Did I miss anything?

[Update a staggered array of numbers with OnUpdate]

Hi, I'm  trying to figure out  how I can animate up a series of numbers using stagger. I have a good working update of a single number:

 

var countVal = {val:0}, newVal = 55;
tl.to(countVal, 2, {
    val:newVal,
    roundProps:"val",
    onUpdate:function() {
        document.getElementById("graphic-statisticOverDna-number").innerHTML=countVal.val
    }
});

 

However, I cannot get a series of numbers to update, staggered, whether I try to tween a series of {val:0} and have them update different elements on OnUpdate, or, as shown in the Codepen URL, if I try to tween the series of elements and update an internal value. The reason I'm interested in stagger is that I am trying to match them to some growing chart bar tweens (which work perfectly  as they're just animating the width property.) I seem to be missing the right way to animate several elements containing a number or text without duplicating my working code above several times. Can anyone see what I'm doing wrong?

See the Pen ExPeVGN by michaelck (@michaelck) on CodePen