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?
First, see if you can figure out how to animate the boxes the way they are when you're not hovering over start: they're moving around the screen in a straight line until they reach the edge of the screen.
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.
@rpeden: Thanks a lot for such detailed explanation! This is exactly what I wanted. I didn't even think that when I hover on 'Start' each box will have to come back with different velocities! Stupid me :P
And I really liked the idea of not putting a codepen -'think you know what's going on without really understanding it' - I totally agree and that has been happening quite a lot to me!
Just one more question - if I may! In the 'Connections' page, the graph looks a lot like D3js interactive 'Chord Diagram'. But I don't see d3js mentioned in <script> tags. Is this due to the webpack that it's possible to hide the underlying dependencies? I'm sorry if this is a dumb question - I've never used webpack.
I have been using repl.it as my go-to playground to write small scripts to check how a particular implementation would look like. However, IMHO the new Repl.it concept looks astonishingly similar to cloud 9! Is it also going to be bought off by some giant corporation and then start asking money for playground ?! :(
Never heard of that band before. Considering they have an album called "Your Computer Lies" I would say that's probably more than a coincidence they chose that name... ^__^;
