budding dev here! I'm so impressed with the :onhover action of 'Start' button of https://2018.stateofjs.com/ Can anyone provide me a direction how to achieve that?
The animation we're looking at is moving SVG boxes around the screen, so if you search for tutorials about how to animate SVG with JavaScript, you'll quickly figure out how to make the animation happen. Although the technique isn't really specific to SVG; it'll work the same if you're moving divs around instead.
Once you've figure out how to animate DOM elements, to recreate what you saw on the start page of the survey, you'll want to keep track of each box's x and y velocity to know where to move them when you render each frame. If a box hits the top or bottom of the screen, reverse its y velocity, i.e. if its y velocity was 2, when it hits the top or bottom edge, it'll be -2. If it hits the left or right edge, reverse its x velocity.
Next, let's look at what's happening when you hover over the start button: each of the boxes has an assigned position, and when you hover over the start button, each box rapidly moves itself back to its assigned position. And it is timed so that each box reaches its assigned position at the same time.
To make that happen, you'll first need to figure out how far each box will have to move horizontally and vertically to get back it its assigned position. To get this, you just do (assigned y - current y) and (assigned x - current x). This will tell you how far each box needs to move in both directions to get to where it it needs to be. Based on this, you can calculate new x and y velocities for the boxes. Each box will have to move at a different velocity, because they'll all be at different distances from their assigned locations.
I've deliberately been a bit vague here, I know. I was going to put together an example on Codepen, but decided against it because it is so, so easy to take a look at someone else's code example and think you know what's going on without really understanding it. Whereas if you learn how to animate elements yourself, and then follow the thought process I laid out, you're a lot more likely to learn this deeply and remember it.
I hope this all helps, but if any of it seemed unclear, let me know and I'll do my best to clarify.