Issue evaluating variable fonts (css variable name) to animate the property

[Pete Barr]

Hey all,

 

I'm experimenting with animating variable font properties and in the pen example I can't seem to evaluate an increment of the weight property css variable name to be able to animate it. Is there something really silly I'm doing here in the JS?

Thanks!

Pete.

See the Pen 8527cd2f5cafb1483bf4c4949239eca5 by petebarr (@petebarr) on CodePen

[GreenSock]

Hey @Pete Barr. Yeah, it looks like your JS wasn't actually using the proper variable name. Here's a corrected version: 

 

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

 

It's a bit more tricky when you're using a dynamically-generated property name. That's why I create the vars object first, then set it like vars[myWeight] = 900. The way you were doing it just made it literally evaluate to "myWeight" (not the actual value of that variable). In other words, it was vars.myWeight instead of something like vars.--myWeight1.

 

Does that clear things up? 

[Pete Barr]

Showing my severe lack of coding skills here  I thought as it's just a string it would just evaluate with the index appended. I'm a little confused by vars[myWeight]=900 rather than say vars.myweight = 900 to add it to the object. Again, sorry, but mucho appreciate the help.

[Shaun Gorneau]

47 minutes ago, Pete Barr said:

Showing my severe lack of coding skills here  I thought as it's just a string it would just evaluate with the index appended. I'm a little confused by vars[myWeight]=900 rather than say vars.myweight = 900 to add it to the object. Again, sorry, but mucho appreciate the help.

 

Hi @Pete Barr,

 

There are just 2 ways to set/get object properties in Javascript ... dot notation and bracket notation (like addressing an array index). With the dot syntax you don't have any wiggle room with dynamic keys ... as you can not do the following

 

someObject."property_"+i = "someValue";

 

but you can do

 

someObject["property_"+i] = "someValue";

 

So @GreenSock was using that syntax to show you how to get at a dynamic variable (which is actually a dynamic property key). It might not be so clear because what is being passed as the key is the variable `myWeight` which was previously set to the value of 

 

"--myWeight"+(index+1)

 

 

which is essentially the same as 

 

vars["--myWeight"+(index+1)] = 900;

 

 

which addresses when evaluated, for example

 

vars["--myWeight1"] = 900;
vars["--myWeight2"] = 900;
vars["--myWeight3"] = 900;
vars["--myWeight4"] = 900;
// etc

 

Which, if syntax allowed, would be like

 

vars.--myWeight1 = 900;
vars.--myWeight2 = 900;
vars.--myWeight3 = 900;
vars.--myWeight4 = 900;

 

 

When using dot syntax,

 

vars.myWeight = 900;

 

"myWeight" would never evaluate to the dynamic properties you're looking for ... the script would be looking for precisely the property "myWeight" in that object (which does not exist).

 

I hope this helps!

 

Shaun

[GreenSock]

Great explanation, @Shaun Gorneau!

[Pete Barr]

Ahhhhh! That really rings a bell now, doh! Thanks so much Shaun and Jack!!

[Shaun Gorneau]

Happy to help, @Pete Barr!

[OSUblake]

Hi @Pete Barr

 

You can do computed property names with modern JavaScript, allowing you to use your "myWeight" variable inline. Note the square brackets [].

 

characters.forEach((char, index) => {
  let myWeight = "--myWeight"+(index+1);
  TweenMax.staggerTo(":root", 10, { [myWeight]: 900, ease: Expo.easeOut }, 0.1);
});

 

 

See the Pen GPqQaB by osublake (@osublake) on CodePen