Set opacity based on y position

[f271353]

Hi, I have a TweenMax that I create that goes from 0,0  --> 100,100 over x seconds.

 

What I want to do is at y value = 33px  I want to start setting opacity towards 25% opacity.

 

At y = 66px value I want the animation to start going towards 0% opacity. 

 

Now what is the best way to achieve such effect? I've tried Sequencing in timeline but it looks crap because I don't know how to group all 3 under the same easing,   as in if I use power4 it goes fast slows down towards 33px,   then fast and slow towards 66px.

 

Instead of fast and then slow towards 100px.

 

 

The only way I've so far managed to locate the y position is in an onUpdate function: 

 

var y = this._firstPT.t._transform.y;

 

And it feels quite wrong to go 4  objects deep to fetch a value. 

[Carl]

Hi f271353,

 

Welcome to the GreenSock forums. 

 

I'm having a little trouble deciphering your question.

Not sure what the starting opacity of the object is supposed to be nor do I know what this means:

 

"as in if I use power4 it goes fast slows down towards 33px, then fast and slow towards 66px. Instead of fast and then slow towards 100px."

 

Are you describing the behavior you want or the behavior you are experiencing? You mentioned you have a single tween changing the y from 0 to 100, but it seems like you are saying that it goes from fast to slow twice with a Power4 ease.

 

I'm sure if you provided a simple demo of the y motion you want and described the opacity values you want at certain percentages of that tween we could better serve you.

 

You can learn how to do that here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Although I don't get the sense that it is exactly what you need, our SlowMo ease lets you merge together easeOut, Linear, and easeIn eases very smoothly with powerful configuration options. Learn more here: http://greensock.com/docs/#/HTML5/GSAP/Easing/SlowMo/

 

demo: http://codepen.io/GreenSock/pen/azGzWE?editors=001

[GreenSock]

I'm in the same boat as Carl - a simple codepen demo would be super helpful, even if it's the "bad" way, and you can describe what exactly is "bad" about it and how you'd like it to be different. 

 

Also, you certainly shouldn't be accessing the current "y" value in the way that referenced _firstPT (note: property/method names that start with an underscore are intended to be "private", and you should almost never write code that depends on them - the _gsTransform object is one exception that we originally intended to be private but so many people wanted/used it, that we committed to it):

//BAD: 
this._firstPT.t._transform.y;

//GOOD:
this.target._gsTransform.y

//ALSO GOOD:
yourElement._gsTransform.y

If I understood your question correctly (which may not be true), your goal is to figure out how long it takes "y" to reach a certain value from the beginning of the tween so that you can then start a different tween (of the opacity) at that point, right? If that's the case, I can think of two ways of doing this...

 

1) Create your timeline with linear easing which makes it relatively simple to figure out spacing, and then pause() that timeline and tween its progress using whatever ease you want:

var tl = new TimelineLite({paused:true});
var seconds = 2; //or whatever...you didn't tell us how long
tl.to(element, seconds, {x:100, y:100, ease:Linear.easeNone})
  .to(element, seconds / 3, {opacity:0.25, ease:Linear.easeNone}, seconds / 3)
  .to(element, seconds / 3, {opacity:0, ease:Linear.easeNone}, (seconds / 3) * 2);

//now the magic...
TweenLite.to(tl, seconds, {progress:1, ease:Power4.easeOut});

2) You could set up your x/y tween with the ease you want, then literally use a while loop to iterate over its progress or time until you find the exact point you're looking for (when y is 33 or 66). Then record the time at which they hit there, and record those. That's all you need - you've got your two numbers, so now delete the iterative code because you only needed that to find the two numbers. Now write your 2 opacity tweens accordingly, using the delays you discovered (or drop them into a timeilne at those spots - whatever).