GSAP js function identifier fails when passing string as parameter in another function

I've been working with GSAP tutorial (links below) and wanted to make a function out of this

tl.from(img, 1, {y: -20, autoAlpha:0, ease: Bounce.easeOut})

so I've created this

    // a = selector, b = duration, c = axis, d = offset, e = type of animation, f= easeOut/In

    // Problem occurs when passing c as either 'x'/'y' string

        function test(a,b,c,d,e,f){
    var tl=new TimelineLite;
    var img = $('img');
    var result = tl.from(a, b, c:d, ease:e+'.'+f});
return result;

    }

test('img',2,"y",-370,"Bounce","easeOut");

As soon as this runs, it doesn't work and has 0 errors in console as shown here http://weconnect.ro/stack/

If within the function I modify the c identifier to the y it runs like magic: https://weconnect.ro/stack/working.html

I'm fairly new to JS and guess the problem might be that y is not really a string (and pretty sure that's not the best method to pass strings from function identifiers).

I'm also clueless on how I would console.log(this) as console.log(test('img',2,"y",-370,"Bounce","easeOut")); outputs the deconstruction of the TL function which I assume is its objects and that's probably the way to go around constructing it.

Any clarification on the matter would be greatly appreciated, thanks!

Solution

This is a bit of a complex problem that requires a bit of explanation of some more confusing parts of the JavaScript Language. I'll try to break this down a bit.

The function tl.from(img, 1, {y: -20, autoAlpha:0, ease: Bounce.easeOut}) is taking an object (everything inside the {}) as the 3rd parameter. In the format that you have written it, the object is an anonymous object which is created on the fly in the method call. However, you could explicitly create the object, and pass the object as the parameter.

i.e. you could call the function as tl.from(img, 1, objectWithVariousProperties)

This leads to the next issue, which is that you are trying to pass a string to your function that represents the name of a particular property. To be able to access the property in this manner, you would use the JavaScript Object Bracket Notation, rather than Dot Notation. That looks something like objectWithVariousProperties[someVariableNamingAProperty].

So, putting this together, you would take in your parameters, create an object and prepare it's properties, then pass the object to the function. Something like the following:

Note I changed the variable names to make the code as clear as possible, and am showing 3 different methods for assigning a value to an Object Property.

function test(selector, duration, axis, offset, animation, fadeDirection){

  var tl=new TimelineLite;
  var img = $(selector);

  var propertyObject = {
    autoAlpha: 0   // inline property assignment
  };  
  propertyObject[axis] = offset;  //bracket notation
  propertyObject.ease = animation + '.' + fadeDirection;  //dot notation

  var result = tl.from(img, duration, propertyObject);
  return result;
}