Demo: https://jeffsum.oliverturner.cloud
Recently the world was introduced to the glory that is jeffsum.com. Intrigued by its gorgeous fading gradients I peeked beneath the covers to see how this effect had been achieved, and found that GSAP was being used to fade between layered divs with linear gradient backgrounds. Solid, cross-browser compatible stuff!
...But a small insistent voice within asked: "why can't we do this more declaratively?"
CSS seems to have become a battleground of late, tempers flaring over whether JS has any business being "in" CSS... but the reality is that the two languages are becoming increasingly complementary. Houdini makes this partnership explicit, with lower level APIs being exposed for developers to extend highlevel CSS authoring features.
The combination of
finally lets us achieve what many of us have long awaited: declaratively animating gradients either by class name or dynamically.
Many thanks to
- Sean Halpin - whose original design this is
- Sara Vieira - whose tweet was an inspiration to get this to work
- Vincent De Oliveira - who has championed Houdini for years and whose demos were immensely helpful