Skip to content

Declaratively animate gradients in pure CSS through the power of the Jeff

Notifications You must be signed in to change notification settings

oliverturner/jeffsum

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A homage to Jeffsum

screenshot

Demo: https://jeffsum.oliverturner.cloud

Introduction

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?"

Houdini: CSS and JS

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.


Credits

Many thanks to