Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

css-sandbox/src/rwd/interpolation.md

Go to file
 
 
Cannot retrieve contributors at this time
Proposal Resources Notes Overlap with Scroll Animations Interpolation Function
119 lines (94 sloc) 3.89 KB
Raw Blame
Open in GitHub Desktop
title eleventyNavigation created changes
Interpolated Values
key title parent
interpolation
Interpolated Values
rwd
2020-11-13
time log
2021-09-22 00:35:28 -0400
Brief notes on @timeline and interpolation function
time log
2021-09-23 00:11:02 -0400
Link to fantasai/mia proposal for interpolation & timelines

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.

Proposal

Fantasai and I worked on a proposal to address & unify a number of related use-cases around interpolation & timelines:

Timelines can be defined in relation to:

  • how far a scroll-container has scrolled
  • how long an element is "in-view" while being scrolled
  • media and container-query features that have a range value

Some timelines can be used to control animations (aka scroll-linked animations), but we also propose some form of interpolation function (currently called mix()) that can apply a timeline and easing function to a single propery.

There's more to the proposal. Check it out:

https://wiki.csswg.org/ideas/timelines

Resources

From Scott:

CSSWG issues:

Notes

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 @scroll-timeline -- 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).

I think there's potential here for a shared @timeline at-rule that could be used for:

  • scroll timelines
  • container-size timelines
  • media-size timelines

(I also think this can all be done without the selector() function, but I need to look into it more.)

Interpolation Function

The CSSWG resolved at one point to add an interpolation function -- though the syntax/details are TBD.

That would require:

  • an easing function
  • a percentage that represents current interpolated position (potentially provided by a timeline)
  • a list of values to interpolate