Sequence / Index / Cover

Three settings, added in 3.1.1, that remove the need to hand-tune a separate scroll window for every child in a list. Use them together: Sequence splits a scroll range between children so they play one after another, Index gives every child a position and count to use in CSS, and Cover measures how much one sticky element is being covered by the next one — useful for card-stack effects where nothing else would give a sticky element any progress at all.

See it live: the Section reveal and Focus gallery templates.

Sequence children

Put this on the parent. It replaces working out one Start/End window per child by hand, and automatically redistributes the range whenever a child is added or removed.

Setting	Meaning	Empty means
Sequence children	Turns it on	Off
Sequence start	Where the whole range begins (5–95)	0
Sequence end	Where it ends (5–95)	100
Sequence overlap	Widens each child's window into its neighbours by 10/25/50/100% of its own width	None

What it actually does:

• It only counts the parent's direct children that already have at least one ScrollTrigger row (any preset, including Custom — Video scrub doesn't count). Other children are left alone.
• It splits Start–End into one equal slot per counted child, then writes each child's own start/end for every preset it has — inline, automatically.
• A Start or End value you've set by hand on a child is respected: Sequence only fills in the one you left empty.
• It also writes --fa-i (the child's position among the animated children, from 0) and --fa-n (their count) on each one.
• Children measure against the parent, not against themselves — so inside a pinned stage, give each child "Get parent" too, so they measure the pinned section instead of the (frozen) sequence parent.

Overlap is well suited to images in the same spot (they crossfade nicely); avoid it for captions replacing each other in one spot — the two texts half-overlapping read as an unreadable tangle.

Index children

Put this on a parent to label its children for use in custom CSS, with no scroll animation of its own required.

Variable	Written on	Value
--fa-n	The parent (children inherit it)	Number of direct children
--fa-i	Every direct child, animated or not	Its position, starting at 0

This replaces :nth-child rules written for one specific count, and CSS :has() quantity checks. A common stagger-from-one-timeline pattern:

.item {
  --v: clamp(0, var(--fa-scroll--custom, 1) * var(--fa-n, 1) - var(--fa-i, 0), 1);
  opacity: var(--v);
  transform: translateY(calc((1 - var(--v)) * 40px));
}

Child i goes from 0 to 1 while the parent's own value goes from i/n to (i+1)/n — the fallback values (1, 1, 0) mean every child shows fully visible when the scroll script hasn't run. Other common uses: a per-child offset (calc(var(--fa-i, 0) * 24px)), or positions around a circle (rotate(calc(var(--fa-i, 0) * 360deg / var(--fa-n, 1)))). --fa-i and --fa-n are plain integers, so a CSS counter can print a "3 / 7" style position label with no extra markup, for any count — see Scroll trigger and the focus gallery recipe.

With Sequence children and Index children on the same parent, Index supplies --fa-i/--fa-n (counting every direct child) and Sequence only writes the windows — see Sequence above.

Covered by next sibling

A card pinned at the top of its own stack doesn't change position, so measuring it against itself never produces any progress at all. "Covered by next sibling" gives it a different, useful progress instead: the fraction of itself that its next sibling is covering.

p = (card.top + card.offsetHeight − nextSibling.top) / card.offsetHeight     (clamped to 0–1)

• The "next sibling" is the next element sibling in the DOM (tags like <script>/<style> are skipped).
• The last card in a stack has no next sibling to cover it, so its progress simply stays at 0.
• It uses offsetHeight, so scaling the card down doesn't change the height used for the calculation.
• The row's own window still applies on top — with Start/End left empty, the preset's output equals the raw covered fraction.

Typical structure for a sticky card stack:

section          (no Fancy setting needed on it, just the overflow-x reset)
└─ stack
   ├─ card       position: sticky · top: X · "Covered by next sibling" + a Custom row
   │  └─ inner   effects (scale, brightness) read from --fa-scroll--custom
   ├─ card       …same, different top
   └─ card       last card: never covered, stays at full size

Cards must be siblings inside the same parent. Give each one an increasing top value if earlier cards should stay partly visible below the one on top of them. Put the actual visual effect on an inner wrapper, not the card itself — the plugin measures the card's own box, and a transform on the measured element changes its own measurement.

Bricks

All three live in the Style tab → ScrollTrigger Animations panel:

Sequence children and Covered by next sibling, in the same Bricks panel.

• Sequence children, with "Sequence start" / "Sequence end" / "Sequence overlap" selects appearing once it's checked. No animation row is needed on the parent itself.
• Index children — a simple checkbox, no extra fields.
• Covered by next sibling — a checkbox; give the card one Custom animation row, and don't add "Get parent" to it (it measures against its own box and its sibling, not an ancestor).

Etch

Fancy panel → ScrollTrigger Animations → Settings: Sequence children (with its Start/End/ Overlap fields), Index children, and Covered by next sibling, each one a toggle that adds its class (fa--seq, fa--index, fa--ref-cover) plus whatever extra window classes you set. Turning Sequence off in the panel also removes its start/end/overlap classes.

Common problems

• Children don't change at all while the stage is pinned. They have no "Get parent" and are measuring the sequence parent directly, which — inside a pinned stage — never moves. Add "Get parent" to each child (with "I am parent" on the outer section).
• Two captions overlap in the editor, or without JavaScript. Some index-dependent layout switch was turned on by something other than the animation itself. Gate the shared-cell layout on the animation's own variable (e.g. --fa-scroll--custom), never on a body class — --fa-i and --fa-n only exist once JavaScript has actually run.
• Adding or removing an item breaks the timing. You're most likely looking at hand-tuned windows from before 3.1.1 (see manual windows recipe) — switch to Sequence children, which recalculates automatically.
• A sequenced card's progress drifts while it covers its sibling. "Get parent" was left on a card using "Covered by next sibling" — remove it; cover measures the card against its own box and its sibling, not an ancestor.
• The covered value looks "wrong by a beat" in testing. Scroll smoothing (see Scroll trigger) makes the value catch up over roughly five times its smoothing time — measure with fa--smooth-off on the element instead.