onUpdate target, index

[benoit]

Hi,

 

I make a graphic with bars and values like the codepen.

Is there a better way to do this ?

Is it better to make a loop for each 'rect' and tween or a loop inside onUpdate for each text ?

See the Pen rNamWGR?editors=1010 by benoitwimart (@benoitwimart) on CodePen

[ZachSaucier]

1 hour ago, benoit said:

Is there a better way to do this ?

Your method is solid. No complains about it from me (besides the fact that I like white space more).

 

1 hour ago, benoit said:

Is it better to make a loop for each 'rect' and tween or a loop inside onUpdate for each text ?

They are pretty much the same performance wise as far as I know (besides some negligible setup time). So I'd prefer this approach that's more readable and easier to change. 

[mikel]

Hey,

 

And what about the new GSAP's utility methods:

 

See the Pen JjoNEqO by mikeK (@mikeK) on CodePen

 

8 minutes ago, ZachSaucier said:

besides the fact that I like white space more

 

???

 

Happy tweening ...

Mikel

 

[benoit]

Good style !

[GreenSock]

Here's another approach that'd let you add as many rects/text as you want without any extra code, and it uses some utility methods: 

See the Pen fff778ac7f2531ab23c65bd859076c7f?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Here's the JS:

var rects = document.querySelectorAll(".rect");
var labels = document.querySelectorAll(".st1");
// create a function that'll convert a 0-1 value into a 0-100 percent that's rounded to the closest 0.1
var percent = gsap.utils.pipe(
      gsap.utils.mapRange(0, 1, 0, 100),
      gsap.utils.snap(0.1)
    );

gsap.to(rects,{
  duration:3,
  scaleY: "random(0, 1)",
  transformOrigin: "center bottom",
  onUpdate: function() {
       let i = rects.length;
       while (i--) {
         labels[i].innerHTML = percent(gsap.getProperty(rects[i], "scaleY"))
       }
  },
  repeat:-1,
  repeatRefresh:true
});

 

Does that help? 

[benoit]

Oh, good !