Is it possible to set a css property as a variable?

[sborrowman]

I have an animation running, and it's working just fine, but I want to clean up the code a little bit.

I'm making a set of curtains that slide open a certain distance depending on what button you click. The issue I'm having is that half of them move left and half move right, so right now I have two timelines running. I want to be able to condense it into one timeline and set both the left postion for the left curtains and the right position for the right curtains at the same time. Any suggestions on how to go about doing this would be much appreciated.

 

Here is my code that I have working right now.

 

$('#curtains-nav-wrapper').find('a').on('click', function(e) {
 e.preventDefault();
 var t1 = new TimelineLite(),
  t2 = new TimelineLite(),
  clickedIndex = $(this).index(),
  offsets = [
[ 61, 40, 24, 0, -15 ],
[ 51, 35, 20, -5, -18 ],
[ 41, 30, 16, -8, -20 ],
[ 31, 16, 0, -11, -22 ]
  ];

 $('#curtains-left').find('.curtains').each(function(idx) {
  var offset = offsets[clickedIndex][idx] + 'px';
  t1.to( $(this), .5, { css:{left: offset}, ease:Back.easeOut, delay: -.4 } );
 });

 $('#curtains-right').find('.curtains').each(function(idx) {
  var offset = offsets[clickedIndex][idx] + 'px';
  t2.to( $(this), .5, { css:{right: offset}, ease:Back.easeOut, delay: -.4 } );
 });
});

[Rodrigo]

Hi and welcome to the forums,

 

Mhh... as far as I can say the only advice will be to create one timeline and then add the respective tween to it, instead of run two timeines, for the rest your code looks good, at least to me .

 

var tl1 = new TimelineLite();

tl1.insert( TweenLite.to(elem, 1, {css:{left:number}}) );
tl1.insert( TweenLite.to(elem, 1, {css:{rigth:number}}) );

 

Now in terms of tweening right and left on the same tween, as far as I know, that can't be done because in my experience GSAP renders the css attributes in the order that they are declared, so if you put this:

 

TweenLite.to(elem, 1, {css:{left:'100px', right:'100px'}});

 

That is going to tween your element to the left position, but not the right position, and if you invert them is going to tween the right position but not the left , so separate tweens are needed, but maybe someone with greater knowledge could give you more advice in this matter.

 

Anyway I hope I can help a little with this,

Cheers,

Rodrigo.

[sborrowman]

Thanks for the reply.

I realize now that I may not have explained what I'm trying to do very well.

I don't want to tween both left and right position on the object. What I want to do is set up a variable that I can use for both properties on one line of code. So the idea would be something like:

var = timelines = [t1, t2],
position = [left, right];
$('#curtains-' + 'position').find('.curtains').each(function(idx) {
  var offset = offsets[clickedIndex][idx] + 'px';
  timelines.to( $(this), .5, { css:{position: offset}, ease:Back.easeOut, delay: -.4 } );
 });

 

That way I can target the two different divs and timelines that I have with one animation call instead of two. I still need it to be two separate timelines, one that targets the left and one that targets the right..

[Carl]

Hi sborrowman,

 

Welcome to the GreenSock Forums.

 

Congratulations on your success with TimelineLite.

 

There is really nothing wrong with the way your original code is set up. Sure, it could be approached from other angles, but I doubt the end-user would notice any difference.

 

There are many ways to get all the tweens into 1 timeline, easiest would be to use your existing code and then insert both timelines into a master timeline

 

var master = new TimelineLite();
//all your other stuff
master.insert(t1);
master.insert(t2);

 

 

Or instead of looping through all the left curtains and right curtains separately, you could loop through the proper set of coordinates in your array and for each value you could insert 2 tweens using insertMultiple() or appendMultiple() so that both the left and right curtain tweens inserted into the same timeline at the same time.

 

After further reading it seems you are more interested in dynamically setting the name of the property you want to tween. I think something like this should work fine for you:

 

 

var prop="left",
value=200

var cssProps = new Object();

cssProps[prop] = value;

TweenLite.to($('.box'), 1, {css:cssProps});​

 

 

Live demo: http://jsfiddle.net/...bassador/Hmy7E/

 

If you have any more questions about the capabilities of GSAP JS feel free to ask.

Be sure to take a peek at the TimelineLite docs if you haven't. Lots of methods for inserting any number of tweens or timelines into timelines at any point in time.

 

-c

[sborrowman]

Thanks for the reply. I think I will just keep it how it is because I'm not sure what I am trying to do will work the way I want. I only wanted to clean it up because the code I gave in my first post was just the testing part and I have a lot more going on now so I wanted to use as few lines of code as possible.

 

I do however, have a different question. The flash guys at my work use this plugin all the time and tell me there is a custom ease addition. Is that available in the JS version?

[GreenSock]

The CustomEase class isn't available yet for JS, but we do plan on bringing it over. However, there are vast numbers of easing options already available in the JS version including SlowMo, plus you can do bezier tweening, so it's tough to imagine a scenario where CustomEase would be mandatory. Was there a particular effect you were looking to accomplish?

[sborrowman]

I wanted an ease that starts slow with a back, then speeds up until the end when it slows down again. I couldn't find a way to get it to work the way I wanted with just easing so I ended up running a timeline that separates it into two different animations that I can have different eases on.