Jump to content
Search Community

Animating a CSS property declared as a variable

bsteward test
Moderator Tag

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

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 comment
Share on other sites

  • Solution

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 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.
×
×
  • Create New...