0

I am trying to currently achieve an animation as following

  1)There are 4 elements in the canvas- 
  2) green square at (5,20) with a width 10 and height 10
  3) 3 lines located respectively at (55,20), (80,20), (125,20).
  4) the horizontal distance from the green square to each of these lines are respectively (50, 80,120)

enter image description here

I want to move the green square in the X Axis to 150px and I want each of the lines to rotate 7.5deg only when they get hit by the green square and not before that.

Please find below a representation of the CSS animation that I am trying to achieve Animation. I am asking CSS to move the square to (5,20) to (150,20) in 4second with a rate of speed of cubic-bezier(0,0,0.58,1) and also rotating the lines.

When I analyse this I realize that in order for me to do that, I need to be able to calculate the t for any nth d in d=st equation. However, as an animation-timing function, to control the speed I have provided cubic-bezier(0,0,0.58,1) to control the speed at which the square move from (5,20) to (150,20).

Is there anyway for me to calculate with a known cubic-bezier value, what is the t for a given d ? For example, in this case the total time =4s, with speed rate cubic-bezier(0,0,0.58,1) at what time the square from (5,20) respectively reaches (55,20), (80,20), (125,20)?

If I can determine that, I can pass on those individual values as the animation-delay for each of those line.

smpa01
  • 147
  • It may help to convert your problem to a purely mathematical one if you're looking for assistance on math.stackexchange. Here I've plotted your cubic-bezier curve: https://www.desmos.com/calculator/xxaopttags. My understanding of the specification is that this has nothing to do with speed, rather that this graph gives position as a function of time, so you're just trying to figure out the equation of the inverse of this graph. This will involve inverting one cubic polynomial, then applying another, which is doable but gross. I suggest just using the desmos graph to get the values you need. – TomKern Apr 14 '22 at 17:57
  • Thanks for the suggestion. It was extremely helpful. I followed this and managed to convert the concept into a fully working code. I managed to achieve what I wanted to. Many thanks for taking time out to spend time on this. – smpa01 Apr 17 '22 at 21:52

0 Answers0