Feature Request - Progress() with Easing

[saar62097]

Hey Greensock

 

Would be great to have the progress() function return 0-1 normalized with the selected easing.

I just animated the rotation of car wheels, and needed that rotation to match the easing of the tween of the car's movement.

Ended up using my own method, by fetching one of the tweened properties ( (current_value-start_value)/(end_value-start_value) ), but a generic progressWithEasing(), or another property to the progress() method, like 'normalize with easing' or something would be great...

 

Cheers.
 

[ZachSaucier]

Hey saar. 

 

I'm not understanding what you're requesting here. .progress() already returns a value between 0 and 1? What are you hoping for instead?
 

Maybe a basic demo would help us understand what you're requesting.

[saar62097]

hello Zach

 

here is a previous question, whoever responded with the working codepen did what I did, i.e setup a proxy, but the feature request remains (  ) , instead of the proxy way, have it as a built in method (again: the problem is that progress() as-is does not reflect the easing chosen for the specific tween):

 

 

 

(posted here because i did not find a dedicated feature-request forum...)

 

 

[ZachSaucier]

You can easily get this value by passing in the current .progress() to the ease function. You can do that using GSAP 3's parseEase() function:

See the Pen LYVNjoo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Or use the _ease property of a tween (never set anything that has _ in GSAP but sometimes accessing it is okay):

See the Pen OJVNjYR?editors=0010 by GreenSock (@GreenSock) on CodePen

[OSUblake]

This already exists. 

 

gsap.to("h1", {
  duration: 5, 
  color: "red", 
  ease: "power4.in", 
  onUpdate: function() { 
    console.log(this.ratio);
  } 
});

 

[ZachSaucier]

Add this.ratio to the list of things I've never seen before  I guess we should add that to the docs.

[saar62097]

OSUblake thank you!

[OSUblake]

16 hours ago, ZachSaucier said:

I guess we should add that to the docs.

 

That might be helpful!

 

And just a little FYI. The progress being passed into the render method of a plugin is the ratio. 

render(progress, data) {
  data.target.style[blurProperty] = data.interp(progress);
}

 

See the Pen NWKjEBG by GreenSock (@GreenSock) on CodePen

 

[trych]

On 2/16/2020 at 9:00 PM, ZachSaucier said:

Add this.ratio to the list of things I've never seen before  I guess we should add that to the docs.

While it seems that `.ratio` has been in the docs for a while, I think it would also be helpful to add a little info to the `.progress()` sub page that this gives you the value before easing. I thought I was going insane here, because I didn't know that.

[GreenSock]

1 hour ago, trych said:

While it seems that `.ratio` has been in the docs for a while, I think it would also be helpful to add a little info to the `.progress()` sub page that this gives you the value before easing. I thought I was going insane here, because I didn't know that.

Done. ✅