Animating a CSS property declared as a variable

[bsteward 0 Likes (Newbie)]

Hey all,

 

I've got a lovely animation up and running for the site I'm working on, but I would like the mobile animation to run slightly differently.

 

Specifically, I've got a Tween that looks something like this:

TweenLite.to(target, 1,	 { "top": 0 });

Pretty basic stuff. What I'd really like to do is replace "top" with some variable, such as orientation, declared earlier in the code depending on what device and screen size the user is using. That way, I can change the animation slightly based on the users' device/screen size. I'd like to do this in one Tween if possible, because the actual tween itself is much longer, and I love keeping my code as simple and elegant as possible. So that super simple Tween becomes:

TweenLite.to(target, 1,	 { orientation: 0 });

where orientation gets declared some time earlier. Is this possible? I've messed around with declaring it a few different ways, but none of them have worked.

 

Apologies if this is an easy fix that I've been missing, but I've been messing around with this for a while now and haven't found a solution.

 

Thanks in advance!

[Carl 9,720 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

Great question (and a little tricky).

 

I made an example where the same tween will either use "left" or "x" as a horizontal property.

The basic idea is that prior to your tween you can create an object with whatever property names you like and then pass that object in as the end vars like:

function animateHorizontal(prop, value) {
  TweenLite.set("#redBox", {clearProps:"all"}) //reset position
  //create object
  var endVars = {};
  //assign a dynamic property
  endVars[prop] = value; 
  //the syntax of the tween does not change
  //nor do you need to use any conditional logic
  TweenLite.to("#redBox", 1, endVars)
}


$("#x").click(function(){
  animateHorizontal("x", 200)
})


$("#left").click(function(){
  animateHorizontal("left", 200)
})

http://codepen.io/GreenSock/pen/aOwXVe