How to get the time an element that has CSS transition with easeOutSine needs to cover a certain distance?

Question

Ok, this is one for math people, I guess. I have some basic knowledge of ease functions but need some helping hand with this.

I have an element that is translated with CSS transition (translateX) using ‘easeOutSine’ function.

It covers distance A in 1500 ms. I need to find out how much time it needs to cover a distance B (somewhere in between)

The function for ‘easeOutSine’ is:

function easeOutSine(t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
}

Obviously A and B are known values for me. But I need to know where to put them in the arguments or how to handle this at all. Thanks very much in advance!

EDIT:

Example: Let’s say the element moves 1000px in those 1500ms. How much time has exactly passed when it is at 360px? It is simple to find out when it moves linear but I can’t get ahead of this with the easeOutSine function. (When it reaches this position I’d like to attach a class to another element)

Answer 1

Assumptions

What I'm hearing is that if you were to trace the line y = c * sin(t/d*pi/2) + b on a piece of paper from t=0 to t=1500, the distance traveled by your pencil would be A. Your goal is to find the t such that the distance is B.

Solution

Long story short, you're gonna be looking at the arc length formula. Specifically, you're going to need to solve B = integral from 0 to t of sqrt(1+(pi*c/(2d))^2 * cos(pi*t/(2*d))^2)dt, where B, c, and d are constants and the variable you're looking for is B.

It's not really obvious to me how the information you have about A can help you solve this, so I would recommend a binary search for t where your initial range is from [0, 1500] and you 'evaluate' the function (that integral) via some technique for approximating integrals. The function y = integral from 0 to t of sqrt(1+(pi*c/(2d))^2 * cos(pi*t/(2*d))^2)dt is monotonic over t, so that would get you the correct answer.

Sorry about how mathy that got; what you're looking to do isn't really possible to calculate explicitly. You might want to check out some tutorial on how to binary search an answer to a math problem if you're not familiar with that method. Good luck!