Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
coco

Passing CSS position as variable into a function

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :) !

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.
×