Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
saar62097

Feature Request - Progress() with Easing

Recommended Posts

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.
 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...)

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

This already exists. 

 

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

 

  • Like 3

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

OSUblake thank you!

  • Like 1

Share this post


Link to post
Share on other sites
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

 

  • Like 3

Share this post


Link to post
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.

×