[css-animations] Clarification question about animation-trigger

Previous Topic Next Topic
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view

[css-animations] Clarification question about animation-trigger

Botond Ballo
Hi there!

A group of us at Mozilla are exploring the possibility of prototyping
the animation triggers and timebases proposal [1] that was posted to
this list a while back.

I have a clarification question about the animation-trigger property
from that proposal.

Quoting from the proposal:

> Name: animation-trigger
> Value: auto | scroll(<snap point> [, <snap point>]+)
> [snip]
> A value of "scroll" means the animation will begin advancing its time
> value/timeline once the element's scrolling container has scrolled to a
> particular position. It uses the same syntax as CSS Scroll Snap Points,
> although we might need to tweak the syntax a bit because I think people will
> want expressions like calc(elements + 10%), so the animation starts slightly
> before the element comes onto the page (see NOTE1 below).
> The scroll function takes a list of values. The odd values define starting
> triggers. The even values define a corresponding ending trigger. An ending
> trigger simply freezes the timeline once it is hit (although see the
> animation-timebase property below).

And quoting an example:

> Example 1. Fade elements in when they are scrolled into view.
> .reveal-section {
>  animation-name: fade-in;
>  animation-duration: 1s;
>  animation-fill-mode: backwards;
>  animation-trigger: scroll(elements);
> }
> @keyframes fade-in {
>  from { opacity: 0; }
>  to { opacity: 1; }
> }

I'm having trouble understandinging what scroll() expects as arguments
from this description and example. I was wondering if the proposal's
author (Dean, who I've cc'd), or anyone else familiar with the
proposal, could clarify a few things:

  - A reference is made to CSS Scroll Snap Points. Which CSS property in
    that proposal is being referred to? (Part of the confusion here could stem
    from the fact that snap points have undergone a couple of revisions since
    the animation-trigger proposal was posted.)

  - In the example, what is "elements"? I had trouble picturing what it could be
    that fits the description of "a list of values, with the odd values defining
    starting triggers and the even values defining ending triggers".

In our discussions so far, we have imagined animation-trigger as
allowing you to specify a single position as a start trigger and a
single position as an end trigger. If the property is intended to be
more powerful than that, I would like to get an understanding of what
sorts of things it is intended to be able to do.

Thanks in advance for the clarifications!


[1] https://lists.w3.org/Archives/Public/www-style/2014Sep/0135.html