michaelh

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.

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?

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?