I made a quick snippet showing how to create an infinite Sine Wave-animation pattern in Framer. Feel free to modify, copy or whatever you want :)
You may wonder why it's not using the common animate-method. The reason is that we want to use time as a dynamic value for every frame we're rendering, which isn't doable with the animate-method.
There's one more approach for custom animations... Instead of leveraging requestAnimationFrame you can listen to the Framer.Loop "update" and "render" Events. With this approach you do the Math and any other heavy lifting that would be needed to adjust the position/rotation/color/etc. in the update() function... And then in the render() function you perform those modifications... It adds a bit of complexity but for cases where you need to do heavier math and don't want to impact the render loop this is an approach worth considering.
I added another ball to your example that shows this approachhttps://codepen.io/anon/pen/RLMaab