Jump to content

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

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



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

Link to comment
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...)



Link to comment
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

Link to comment
Share on other sites

This already exists. 


gsap.to("h1", {
  duration: 5, 
  color: "red", 
  ease: "power4.in", 
  onUpdate: function() { 


  • Like 3
Link to comment
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
Link to comment
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
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.