Linking to x-axis and y-axis

I try to make a sunisoidal wave similar to this gif (link).
But i could not link the rotating red arrow to Brown arrow moving along y-axis and red green arrow moving along the x-axis.
When i make separate animations the result is approximate but not exactly synchronous. I mean i make an unique animation for red arrow for 4seconds, a seperate animation for brown arrow for 4 seconds. In this case one is a little bit late while the other ise early.
I will appriciate any help on this topic.
Thanks in advance

Since i am a new user i could not upload my .sifz file but please downolad from this link:

I think this problem in your animation can easily be solved by changing the waypoint type from clamped to to linear.
Otherwise you need to export your rotation angle and use that to change the x or y position or scale of the other arrows.