Change .vars:Object tweening property name dynamically

[milkaWhat]

Is it possible to change the .vars tweening property name? It doesn't seem to be accessible, and probably for a good reason.

 

If possible, in the end I want to be able to change tweening property from "x" to "y" with a conditional statement or vise versa.

 

In the Codepen I was trying to use coordPosY and coordPos to interchange "y" to "x". 

See the Pen JyYmWj by christo_pher (@christo_pher) on CodePen

[GreenSock]

Hm, if I understand your goal correctly, you could do something like:

var vars = {autoAlpha:0}; //all your regular, non-conditional stuff
if (yourCondition) {
    vars.xPercent = 25;
} else {
    vars.yPercent = 25;
}
TweenMax.to(element, 2, vars);

 

Or if you want to be concise/fancy:

vars[yourCondition ? "xPercent" : "yPercent"] = 25;

 

Does that help?

[milkaWhat]

Yes, that helps. Thanks Jack!

 

You just called the property name on the fly. That was to simple. I did not think of that, obviously.

 

The purpose is create a timeline animation function that can be updated from whatever direction you want.  Codepen has been updated and gives an idea of my goal.

[OSUblake]

You can also do that inside the object using modern JavaScript.

var tl new TimelineLite()
  .staggerFrom(message, timeDuration, {
    [yourCondition ? "xPercent" : "yPercent"]: percentage,
    autoAlpha:0, 
    ease: Elastic.easeOut.config(1.2, 0.75)
}, stagDuration);

 

See the Pen wqMvbV?editors=0010 by osublake (@osublake) on CodePen