Passing CSS position as variable into a function

[coco 4 Likes (Newbie)]

Hi

Trying to figure out what I am doing wrong with this pen:



I want to pass the properties for the timeline animation through a function's arguments.  Passing in the element that is being animated is not the problem.  Where I am stumped is with the property.  The function has a .from animation.  The starting position is what I want to pass as a variable. 

As you can see in my codepen, and below, I attempted to do this by declaring the CSS position in a var and then converting that CSS position into something that can be used in the timeline and passed as into the function (startPos).

What I am doing does not work ....  Any better ideas on how to achieve this?  Thanks!!  

 

 

 

 // create variables  for CSS positions 

var leftVar = "left: -200px";

var bottomVar = "bottom: -50px"; 

 

// remove quotes 

var fromLeft = leftVar.toString();

var fromBottom = bottomVar.toString(); 

 

 

See the Pen MKjQPK by nushi (@nushi) on CodePen

[Carl 9,066 Likes (Superhero)]

Thanks for creating the reduced demo. Very helpful.

 

Your best bet is the best thing to do is pass objects into those functions you created. 

var leftVar = {left: -200};
var bottomVar = {bottom: -50}; 




// timeline H1 animation 
var titleMove = new Object(); 
titleMove = function(element, startPos){   
  var tl = new TimelineLite() 
      .from(element, 2, startPos); 
 return tl;  
}


// pass in arguments for element and start positions
titleMove(one, leftVar); 
titleMove(two, bottomVar); 

 

 

http://codepen.io/GreenSock/pen/KVgowV?editors=001

[coco 4 Likes (Newbie)]

Thanks, Carl!  

So, basically, I wasn't far off   and  just had to remove the curly braces.  I suppose it's best to make all the properties into one variable, in case there are more to add.

Merry Holidays !