Jump to content
Search Community

How to tween.to an object property, using a separate property as the destination value?

Pr3fix test
Moderator Tag

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

Say we have this code:

  var particles = [
  {x: 100, y: 100, endX: 10000},
  {x: 200, y: 200, endX: 20000},
  {x: 300, y: 300, endX: 30000}
];

and we want to Tween the 'x' value of all the objects in the array, using the 'endX' as the destination value.

 

How do you access the destination value from within the TweenMax.to() statement?

TweenMax.to(particles, 3, {x: this.endX});

does not seem to work, and I can't find any configuration of settings that does.

 

the "x" value for each object should be tweened to the "endX" value on each object.

See the Pen GpqbBY by anon (@anon) on CodePen

  • Like 1
Link to comment
Share on other sites

Hello Pr3fix, and Welcome to the GreenSock Forum!

 

Here is an example of GSAP animating elements, using an object literal.

 

See the Pen Croyi by jonathan (@jonathan) on CodePen


 

Just an example that you can change to fit your needs, but this could be done in many ways ;)

var obj = {
  0: {
    target: "#box1",
    duration: .25,
    vars: {
      autoAlpha: 0,
      scale: 1.2
    }
  },
  1: {
    target: "#box2",
    duration: .25,
    vars: {
      autoAlpha: 0,
      scale: 1.3
    }
  },
};

var tl = new TimelineMax({repeat: -1});

var i = 0;
for (var key in obj) {

  tl.to(obj[i].target, obj[i].duration, obj[i].vars);

  // output to get each value
  // obj[i].target
  // obj[i].duration
  // obj[i].vars
  // obj[i].vars.autoAlpha
  // obj[i].vars.scale

  i++;
}

Hope this helps! :)

  • Like 3
Link to comment
Share on other sites

Great work guys, those are perfectly suitable solutions. Pr3fix, it looks like you updated your pen.

 

In a to() tween, even if you have multiple targets (like an array of them) all the end properties have to be the same. So the most common and appropriate solution is to devise a loop that creates unique tweens for each target.

 

However, in 1.18.0 we released a super new feature for stagger-based tweens called cycle that let's you customize the end values for each tween.

You can specify an array of end values OR function-based values that can run custom logic!

It is explained in detail here: http://greensock.com/gsap-1-18-0. Please watch the video.

 

The code below uses a stagger to with cycle to generate custom ending x values for each tween of each object.

Crack open you console and notice that when the tweens finish each object's x value is equal to its endX

var particles = [
  {x: 100, y: 100, endX: 10000},
  {x: 200, y: 200, endX: -20000},
  {x: 300, y: 300, endX: 30000}
];
console.clear();
console.log(TweenLite.version) //1.18.0


//one staggerTo() animates properties of multiple targets to unique values!
TweenMax.staggerTo(particles, 3, {
  cycle: {
    x: function() {
      return this.endX;
    }
  },
  
  onComplete: function() {
    console.log(this.target); // x and endX will be equal!
  }
})
 
*note the pen above loads version 1.18.0 
  • Like 3
Link to comment
Share on other sites

in addition to Carl's and Jonathan's great advice , you can do like this too :

 

var particles = [
  {x: 100, y: 100, endX: 10000},
  {x: 200, y: 200, endX: -20000},
  {x: 300, y: 300, endX: 30000}
];

var tl = new TimelineMax();

for ( var i=particles.length; i--; ){ tween(particles[i]) };

function tween(myObj){ tl.to(myObj,1,{ x:myObj.endX },0) };
  • Like 2
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...