Recreating the Apple Watch UI using a hexagonal grid

Building on the hexagonal grid from earlier, I have added a little JavaScript and have created an effect similar to the Apple Watch home screen UI.

Below is a video of it in action, I am using IE11 (metro version) on a Surface Pro 2 which I found to be the most performant for this effect. Chrome was janky as hell, and Safari on the iPad doesn’t like to do things while scrolling.

And an embedded demo, it works best on a touch screen although not an iPad:

The code can be found at this CodePen.

Posted toCSS Experiments HTML Interactive iOS Javascript User Interface
  • This doesn’t seem to work at all in safari or a WebView, which is a big shame. Do you have a solution for that? Also, is there a way to “loop” these spheres?