w3c
[css-animations-2][web-animation-2] Rename exit range to active range
In scroll triggered animations, we have a notion of an exit range. This acts as a range in which the animation stays active once it has been triggered.
To borrow from pseudo classes, specifically :active, maybe this range is better named as "active range".
Here's a demo that @flackr put together for the analogy to the :hover state:
https://jsbin.com/yusecom/edit?html,css,output
TLDR: Let's rename the exit range and all corresponding properties to active range
@bramus @DavMila @ydaniv
At the same time if we change this we should probably change the spec terminology from "enter" to "activation" or something similar, giving us the activation range and the active range, which makes sense to me.
+1 for Activation Range and Active Range. This makes it much easier to reason but also to talk about it, as there is no more confusion with the named view-timeline ranges (trigger exit range vs (vtl) exit range).
It looks like we're aligned on doing this. I'll request an async resolution.
The proposed resolution is to rename timeline-trigger-range and timeline-trigger-exit-range to timeline-trigger-activation-range and timeline-trigger-active-range respectively.
@DavMila though we have agreement here, perhaps it's better raise this to the group? In case someone might miss it?
@ydaniv Isn’t that what the async resolution is for? The chairs will send this proposed resolution out to the group and without any objections within a specified timeframe, it will be accepted.
The CSSWG will automatically accept this resolution one week from now if no objections are raised here. Anyone can add an emoji to this comment to express support. If you do not support this resolution, please add a new comment.
Proposed Resolution: Rename timeline-trigger-range and timeline-trigger-exit-range to timeline-trigger-activation-range and timeline-trigger-active-range respectively.
I really don't like using the activation/active distinction like this. Differing just in tense isn't usually a good idea, as we don't usually communicate tense in our property names in the first place; we usually try to keep words in a default conjugation.
I do like "active range" for the second one; it's better than "exit range". So maybe just "enter range" for the first, then? *-trigger-enter-range and *-trigger-active-range.
Pairing enter with active seems like a weird combo. It also might add confusion to enter range (from triggers) and entry range (from view timelines) – something we are trying to prevent here with this rename.
Anecdotally, last week during a call with our GDEs, I did a quick introduction to Scroll-Triggered Animations. During the 2 minute intro I used the terminology “activation range” and “active range” (because that’s when the trigger becomes active, and later inactive) and I must say they immediately got it. I’d like to believe that this confirms that activation and active are the correct names.
Also see this visualizer (in Chrome Canary with flags) that shows the ranges + also shows whether the trigger is active or not active: https://codepen.io/bramus/full/bNpzXrV. The terminology use for all parts nicely fits together.
I really don't like using the
activation/activedistinction like this. Differing just in tense isn't usually a good idea, as we don't usually communicate tense in our property names in the first place; we usually try to keep words in a default conjugation.
We don't have to make it part of the property name, we could call use timeline-trigger-range and timeline-trigger-active-range properties, and call it activation and active range in the spec. I.e. we currently call it enter range even though the property doesn't have enter in it.
TLDR; There are two decisions,
- Does the activation / entry property really need to have anything extra in the property name? (It doesn't currently)
- Is the better term activation or entry? Depending on the first decision, the impact of the second may just be spec terminology.
I think this is something we might be able to quickly resolve with a straw poll, options:
a) timeline-trigger-range and timeline-trigger-active-range define the activation range and active range of the timeline trigger. (emoji vote 😄)
b) timeline-trigger-range and timeline-trigger-active-range define the entry range and active range of the timeline trigger. (emoji vote 🎉 )
c) timeline-trigger-activation-range and timeline-trigger-active-range define the activation range and active range of the timeline trigger. (emoji vote ❤️)
d) timeline-trigger-enter-range and timeline-trigger-active-range define the entry range and active range of the timeline trigger. (emoji vote 🚀)
e) timeline-trigger-entry-range and timeline-trigger-active-range define the entry range and active range of the timeline trigger. (emoji vote 👀 )
Edit: Added emoji vote in case it helps get useful signal prior to the discussion - feel free to vote on multiple
I can relate to @tabatkins' dislike of the naming. Naming these properties was problematic from the start.
The thing is, the "active-range" will probably be less used. It's mostly important for the play reset flow, and its behavior is actually "linger on the current state while inside, and trigger this action when exiting". I'm not sure remaining with just the word active on that range is a good idea, might be confusing if you don't have @bramus there beside you to explain 😅
I think if we can solve that name, the rest is a no brainer, but I don't have a good word for that ATM (probably "linger" won't cut it)
The CSS Working Group just discussed [css-animations-2][web-animation-2] Rename exit range to active range, and agreed to the following:
-
RESOLVED: Use timeline-trigger-entry-range and timeline-trigger-active-range
The full IRC log of that discussion
<fantasai> flackr: animation-trigger has two ranges. one is when you get into that range, you activate the trigger (plays animation or whatever)<fantasai> flackr: and while trigger is active, can have a different range which can be larger
<fantasai> flackr: currently called exit range, proposing to call it the active range
<fantasai> flackr: mostly agreed on this, other than what to call the first range
<fantasai> flackr: two questions: 1) does it need to have a name?
<fantasai> flackr: in spec describe it as entry range or whatever
<fantasai> flackr: or 2) have an explicit name for this like "enter" or "entry" or "activation"
<bramus> q+
<fantasai> flackr: I don't think I'd oppose any of the proposals, so maybe just straw poll?
<fantasai> flackr: so questions are do we give that property a distinct name or do we just leave out the extra description
<astearns> ack bramus
<fantasai> flackr: and if naming it, what are these called
<bramus> https://codepen.io/bramus/full/bNpzXrV
<TabAtkins> Small sample, but the emoji reactions lean heavily toward `trigger-range` and `trigger-active-range` for the property names
<fantasai> [bramus shows a demo]
<fantasai> activation range is the middle half of the screen
<fantasai> but the active range is until the item starts to leave the viewport (a wider rane)
<fantasai> s/rane/range/
<fantasai> flackr: The active range is an analogy of "while hovered, you have to move your mouse to [missed]"
<fantasai> flackr: whie active, you have a larger range to no longer be active
<Rossen3> q?
<ydaniv> q+
<astearns> ack fantasai
<kbabbitt> scribe+ kbabbitt
<kbabbitt> fantasai: talking about 2 different properties, one trigger [missed] and one trigger active range
<kbabbitt> ... maybe we want a shorthand now or maybe in the future, don't want one longhand to be a shorter version of another
<kbabbitt> ... active and activation are too close together and that would be confusing
<kbabbitt> ... between enter and entry I think entry is a bit more natural
<bramus> q+
<astearns> ack ydaniv
<fantasai> s/[missed]/entry range/
<fantasai> ... so I would pick (e)
<fantasai> ydaniv: I agree with fantasai
<fantasai> ydaniv: Also I'm concerned that "active" also sounds like an entry.
<fantasai> ydaniv: Also I'm concerned by the demo, I think we require the active range to be larger than the entry range
<fantasai> bramus: it was larger
<fantasai> flackr: already required per spec
<astearns> ack bramus
<fantasai> bramus: Entry might also confuse authors because you're specifying a range from a view timeline
<fantasai> bramus: so you could say, oh, entry range is entry 100% and ... then you have "entry" twice, one is from the timeline range
<fantasai> bramus: so that can be confusing when talking about it
<TabAtkins> I'm fine with a poll
<fantasai> flackr: Having presented both arguments, would everyone be happy with a poll? I just want to choose a property name
<fantasai> flackr: I think we're polling between entry and activation. I think fantasai presented a good argument for not having nothing
<astearns> ack fantasai
<kbabbitt> fantasai: one point, what if you confuse active and entry range ... in the past we were thinking of entry range as primary thing you set
<kbabbitt> ... exit range is derivative, might want to set differently
<kbabbitt> ... primary thing author wants to set is active range, don't want to set an entry rannge, then entry range is a narrowing of the primary thing they're setting
<kbabbitt> ... rather than having exit range be an extension of primary range
<ydaniv> q+
<kbabbitt> ... in that case I don't think the pairing is that confusing
<astearns> ack ydaniv
<flackr> +1 that sounds like a good way to think about it
<fantasai> ydaniv: exit or active range, behaves more like a hold range or maintain range, so I think the naming should go along this line of terminology
<fantasai> ydaniv: so something like "active range" and "hold range", then each one is more clear
<miriam> those sound the same to me
<fantasai> astearns: Not sure I get "hold" as the term.
<fantasai> astearns: I think we should be open to refining the names if we find something that works better
<miriam> +1 fantasai's proposal
<fantasai> flackr: I'm happy with what fantasai proposed. Just want something we can all agree to.
<kbabbitt> +1 to having a term in both properties
<fantasai> astearns: So consensus for adding term to both properties to distinguish
<fantasai> astearns: Seems like (c) and (e) are the top choices
<fantasai> astearns: Should we have a poll between those two?
<fantasai> c) timeline-trigger-activation-range and timeline-trigger-active-range
<fantasai> e) timeline-trigger-entry-range and timeline-trigger-active-range
<TabAtkins> E
<bramus> C
<fantasai> e
<kbabbitt> E
<flackr> e
<JoshT> E
<astearns> e
<DavidA> e
<jfkthame> c
<miriam> e
<ydaniv> E
<jbreiland> E
<vmpstr> c
<Rossen3> e
<dbaron> e
<jensimmons> e
<emeyer> e
<fantasai> astearns: So we'll go with (e) for now
<kbabbitt> fantasai: since bramus was taking about confusion with entry keyword, we could use the word start
<kbabbitt> ... timeline-trigger-start-range and timeline-trigger-active-range
<kbabbitt> ... either of those are fine with me, just don't like activation
<fantasai> astearns: Let's go with this, and we can continue bikeshedding later
<fantasai> astearns: any objections?
<fantasai> RESOLVED: Use timeline-trigger-entry-range and timeline-trigger-active-range
