Dance of the Houdini Hexagons

See the Code
See it Full Page
See Details

This is not my first time making [dancing hexagons](… but the tiling is so much simpler and more consistent now with CSS grid.

I made the original dancing hexagons to show off individual transform functions (via `transform` + CSS variables).

This pen is a chance to use Houdini and CSS keyframe animations instead of a bunch of setTimeouts + CSS Vars (as I did in the original dance)… as such the full experience is only in Chrome Canary with Experimental Web Platform Features as of 2/2018.

### Why this is interesting…

There is one `transform` for each hexagon, consisting of a `scale`, three rotations in the X and Y axes each, two rotations in the Z axis, and two translations in the X and Y axis each. There is a CSS Keyframe animation that is only modifying the custom properties (CSS Variables) that make up the initial `transform`. So one rotation can be animated independently from the other functions, for example.

As an added bonus… one X and one Y rotation are never modified by the keyframe animations (`–rx3` and `–ry3`). They are instead changed via JS when your mouse/finger/pointer moves with Pointer Events. A transition is applied for those two custom properties so everything animating is kept smooth.


To be fair, I kinda just like the simple scaling of the base experience, too. I find it soothing.

This Pen uses: HTML, CSS, JavaScript, and

Source: codepen

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *