Jump to content
GreenSock

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

Animating a CSS property declared as a variable

Recommended Posts

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!

Link to post
Share on other sites

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

  • Like 1
Link to post
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.

×