I'm learning vanilla JS at the moment. One of the things I'm learning how to do is make simple animations. I've made an animation where I moved a square div in a square path. I've made another where I moved a circular div diagonally downward.
I've even learned how to use the scrollTo() and scrollBy() methods to make the window follow the moving object instead of letting it just disappear from the screen.
After these simple linear examples, I tried moving a div in a non-linear circular path. I first tried using the formula for a circle in cartesian coords (Math.pow((x-a), 2) + Math.pow((y-b), 2)). I solved for x and y in terms of the other variable and set each equal to style.left and style.top, respectively.
When this didn't work, I tried it in polar coords: x = rcos(theta), and y = rsin(theta). Neither of these methods made the div move in a circular path. I even took into account that the screen is really like the lower right quadrant in cartesian coords, with the origin in the upper left corner. I also tried using Math.ceil and Math.floor to make the final answer an integer. And yes, I added " + "px" " at the end of style.left and style.top.
I've tried finding "circular" and "non-linear" animations on Lynda.com, Youtube, and w3schools, but I haven't been able to find anything that matches what I'm looking for. At this point, I'm starting to think that maybe it's not possible to move a div in a circular path. That seems unlikely, and I'm hoping someone can help me with this.
I know there are other methods of animation like css transforms and jQuery, but I'm trying to learn how to do it first with plain javascript.