See the Code - See it Full Page - See Details
_As of 12/10/2017 you need to use Chrome + Enable Web Platform Features flag to see Houdini's `CSS.registerProperty()` which enables the independent transitions._ Thanks to Custom Properties (CSS Variables) we can enable independent transforms. The first box (red) will be able to transform individual scales, translates, and rotates. Even better they can be transitioned. BUT they can by default only transition on the main `transform`. So the scale, translate, and rotate cannot have separate transitions. For example if you change the translate from 0 to 80, and as it nears the 80 value you change it to a scale of 2, the transition will start over. So if you change the scale while the translate is 70 (10 away from the end state you specified), both the scale and the last 10 units of the translate will do a full transition duration. We cannot transition the individual transformations by default, because the browser does not know enough about how the custom properties are being used. A custom property can be any value... a number, a list, a string. So setting a transition on the `--scale` will have no effect. With Houdini, we can instruct the browser to treat our custom `--scale` property as a number, our `--tx` (translation) as a length, and our `--deg` as an angle. With this information, the browser can do the proper interpolation of the main `transform` by setting the transition on the custom properties that are used in the `transform`.
This Pen uses: HTML, CSS, JavaScript, and