Calculating Progress from a current value

[Zediah]

Hi guys, long time user, first time poster. 

 

I've got a problem where I want to be able to determine the progress % of a tween/timeline based on a a known 'current' value ( as well as knowing the start and end values). Everything I can see is about finding the other way around, i.e. finding the values given a current progress value.

 

An example tween:
start:

width: 0px
end:

width: 140px
ease:

Circ.easeIn

 

current value:

width: 38px

 

progress at current: ?
 

My exact example is where I've had one timeline stop before it finishes, keeping its' changes - I want to do the equivalant of a 'reverse' on this timeline, but I can't guarentee it'll always be the same timeline - so I can't just call reverse(). I want to know the progress so I can start the timeline at this 'current' value with any ease defined at the correct position.

 

I promise I've scourged the internet/these forums to try find an answer but have had no luck, perhaps my google-fu is not strong enough....Would anyone know how to do this? At the moment I'm considering a binary search to approximate the ratio using Ease.getRatio() and comparing it to the current value. But all the information is there, just not exposed in a way that I can see. Am I missing something? Is there a better way?

 

Thanks

[OSUblake]

I wouldn't expect to find much on Google, as it's not that straightforward. Look at an ease like bounce or elastic. The same value can happen more than once. 

 

I'm assuming you're trying to maintain the same ease, but with different values, correct? For getting the progress, can't you just get the it from the current animation? You could also tween a generic object with a linear ease from 0 to 1 at the same time, and use that value.

 

But knowing the progress won't solve the problem if you are using different values. 50% of 100 is different than 50% of 200. So using different values will cause the animation to jump. The only way I can think of to prevent that jump is to interpololate between the original and current value using the ModifiersPlugin.

 

Here's a function to do the interpolation. The progress value would be the progress of the current animation.

function lerp(start, end, progress) {
  return start + (end - start) * progress;
}

And here's a demo that might help you out, although it's based on mouse movement. I'm interpolating between the current mouse position and the current position of the image. Think of them as the original and current values. What I'm returning in the modfiers function is doing the same thing as that function.

 

See the Pen 4160082f5a86a3cd0410fb836a74fa68?editors=0010 by osublake (@osublake) on CodePen

 

.

[Zediah]

You make a very good point about bounce and elastic, I honestly hadn't thought about that and am not sure how I would deal with it.

 

I'm trying to build a generic enter/leave animation library for my react components. I wanted to build a solution that doesn't need to know much about the other animation such that you could easily use different enter/leave durations/eases/etc. The problem is that given that it could be a different ease or duration, passing around the progress of the previous one would not be correct. As you say, 50% of 100 is different to 50% of 200 - but I want it to be able to get the progress at '50' as appropriate for the current timeline (e.g. at '50' in a 100 timeline, it's 50%, at '50' in a 200 timeline, its 25%).

 

I think I see what you're getting at with the modifiers plugin, it looks quite interesting. I've seen that lerp function a few times while trying to search for answers on this forum for this question. I will be sure to investigate it - thanks!

 

I'm also thinking of reverse engineering the eases and swapping the equations around so that they find P, instead of accepting P... but this still doesn't help me for bounce or elastic.

 

I just wanted to say as well, thanks a lot for the reply. I greatly appreciate the help.