Re: [css-animations] Proposal for animation triggers, timebases and additive behavior

> On 10 Sep 2014, at 11:58 am, Robert O'Callahan <robert@ocallahan.org> wrote:
> 
> On Wed, Sep 10, 2014 at 11:49 AM, Dean Jackson <dino@apple.com <mailto:dino@apple.com>> wrote:
> I'd really like to avoid script if possible, not because I have anything against script, but because it's refreshingly awesome to completely declaratively author a page that responds to scroll - both triggering an animation and all the fancy parallax effects.
> 
> Right.
> 
> I have some ideas for fixing the circularity problem with declarative syntax. However, I don't think any of them are good ideas. The basic issue is that animation-timebase:scroll with element-relative positions makes CSS styling dependent on element geometry. That is a fundamental breach of existing CSS invariants :-(.

Yes, that's a tricky one. So far my prototype avoids that by calculating the end points in advance, so that if your animation moves the element vertically on the page (or increases the height), you don't get into a weird situation. Obviously that's not a real solution.

However, your fundamental invariant has already been breached a few years ago. e.g.

div {
  transition: transform 1s;
}

div:hover {
  transform: scale(0.5);
}

Depending on where your pointer is, you get something that flip flops between styles as the style changes the geometry.

> 
> Meanwhile, some more bikesheddy comments:
> 
> Since animation-trigger:scroll only makes sense with animation-timebase:scroll, why not fold animation-trigger into the animation-timebase value? So you write "animation-timebase:scroll(<startpos> <endpos>?)"? (Note, need to specify what happens when startpos > endpos...)

This was actually my first draft - we only had a single property. However, it's the other way around from what you say, animation-timebase:scroll probably depends on animation-trigger:scroll. You want the ability to trigger a normal time-based animation when the user hits a point in the page (e.g. fade this thing in as soon as it comes onto the page), and also the ability for the scroll position to affect the duration (e.g. fade this thing in as you scroll it onto the page).

You see both cases in trendy web sites these days.

> 
> For animation-behavior:add, in what order should the animations be applied?

The order in which they are specified, just like regular animations. This means if you had 4 animations all trying to change transform:

animation-name: a, b, c, d;
animation-behaviour: replace, add;

...you'd only see c+d (since the list repears, making c replace the value of a+b).

Dean


> 
> Rob
> -- 
> oIo otoeololo oyooouo otohoaoto oaonoyooonoeo owohooo oioso oaonogoroyo
> owoiotoho oao oboroootohoeoro oooro osoiosotoeoro owoiololo oboeo
> osouobojoeocoto otooo ojouodogomoeonoto.o oAogoaoiono,o oaonoyooonoeo owohooo
> osoaoyoso otooo oao oboroootohoeoro oooro osoiosotoeoro,o o‘oRoaocoao,o’o oioso
> oaonosowoeoroaoboloeo otooo otohoeo ocooouoroto.o oAonodo oaonoyooonoeo owohooo
> osoaoyoso,o o‘oYooouo ofooooolo!o’o owoiololo oboeo oiono odoaonogoeoro ooofo
> otohoeo ofoioroeo ooofo ohoeololo.