Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Pete Barr

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

Recommended Posts

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

Link to comment
Share on other sites

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

 

 

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? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

 

 

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×