Animate one property dependant on another

[Dave Stewart 31 Likes (Newbie)]

Is it possible to animate a property of an object based on the value of something else?

 

I'd like to animate a parallax effect, so it would be useful to animate all but the top layer based on fractions of the top layer's left property.

 

 

[Carl 11,164 Likes (Superhero)]

Sure, you would just use an onUpdate callback to modify any number of objects based on the properties of the element you are animating

 

var red = document.getElementById("redBox"),
    blue = document.getElementById("blueBox");

var t = TweenLite.to(red, 1, {left:550, onUpdate:parallax})

function parallax() {
  //the blue box will only travel half the distance
  blue.style.left = parseInt(red.style.left) * 0.5 + "px";
}

 

 

http://codepen.io/GreenSock/pen/xbjdD?editors=101

[Dave Stewart 31 Likes (Newbie)]

Makes sense! Thanks.