Jump to content
GreenSock

coco

Passing CSS position as variable into a function

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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