Breakpoints only get you so far. In many cases it would be better to have units and values that can respond more fluidly to context. We can do some of that with relative units (several JS plugins provide container-relative units), but that approach comes with a number of limitations.
Scott Kellum has been doing interesting work in this area – what he calls “Intrinsic Typography” – applying animation/transition concepts like “easing” and “keyframes” to responsive type.
- Interpolate values between breakpoints
- Split CSS event bindings from application
- Higher level CSS interpolation module
- Need method to interpolate variable font settings
- Native interpolation function in CSS
TODO: Look into this more…
A few notes from my conversations with Scott:
- The most common use-case is that each property has a start-value and end-value aligned to particular container sizes, and an easing curve to interpolate. This is more like a transition than a keyframe animation.
- While it’s rare for a single property to have additional/intermediate “stops” defined, it is useful to define multiple properties in the same place, even with different start/end points. A keyframe animation with multiple stops makes that possible in Typetura.
Overlap with Scroll Animations ¶
This reminds me of the proposed
and I see Scott had the same thought:
Split CSS event bindings from application
I think the syntax could use some finesse, but that direction feels right to me – building on current animation/transition syntax, to make it work with inputs other than “time” (like scrolling, or container-width).