A scroll position, a named timeline range and the progress of an animation effect can all be displayed as percentages while referring to different intervals. The distinction becomes clear only when the scroll source, subject geometry, attachment range and timing model stay visible.
This guide follows one original scroll-driven animation from source offset through timeline position, attachment-range normalisation, easing and rendered keyframes, then changes one context at a time.
The worked records are original teaching examples. Each keeps the observed value, reference condition, derived result and decision in separate fields so the reader can see where a conclusion begins and where it stops.
A changed-context check alters one consequential condition while leaving the other inputs fixed. This makes transfer visible and prevents the original numerical answer from becoming a rule without a scope.
Keep a compact evidence receipt: object, method, units, reference, conditions, transformation, result and nearest rival explanation. A future reader should be able to reproduce the narrow claim from that receipt.
The five reading routes move from definitions to mechanism, evidence, transfer and reporting. Readers may enter by task, but the examples remain connected so the explanation never becomes a list of detached tips.
The practical standard is an answer that can be checked. Preserve raw inputs, intermediate calculations, exclusions and versioned sources; then state one stronger claim that the evidence still cannot support.
Before choosing a formula or property, name the reader job in one sentence. A diagnostic question, a design choice, a compliance check and a teaching comparison may use the same observation differently.
Every worked case includes a counterexample with one familiar surface feature and a different mechanism underneath. The pair matters because a definition becomes useful only when the learner can reject a tempting near-match.
The evidence route treats missing information honestly. An unknown method, reference condition or boundary stays blank until a source supplies it; a plausible assumption may complete the arithmetic while weakening the conclusion.
The transfer route changes scale, location, timing or composition without silently changing every other field. Predict the direction first, then calculate or inspect the result.
The reporting route keeps measurement and judgement separate. State what was observed, what rule produced the derived value, what uncertainty remains and which action follows only under the declared conditions.
The final check is reader-facing: a person entering through the short answer should know the distinction, a person following the worked example should reproduce it, and a person using the sources should see where the example ends.
A useful misconception test asks the learner to construct two cases with the same headline number and different underlying records. If the interpretation changes, the omitted condition belongs in the result.
Where a standard leaves behaviour to the platform, method or competent decision-maker, the article says so directly. A boundary is useful evidence because it tells the reader which conclusion can travel.
The examples avoid hidden precision. Rounded display values remain linked to the unrounded calculation, and stipulated inputs are labelled as teaching data.
A complete explanation keeps three layers apart: the thing in the world, the method that turns it into a value, and the decision made from that value. When two labels sit in different layers, numerical agreement is evidence to investigate rather than permission to merge their meanings.
For each central example, sketch the boundary before calculating. Mark what crosses it, what stays outside, what the instrument or algorithm can observe, and what must be inferred. This small diagram prevents a later percentage, ratio or diagnostic label from silently changing its object.
This specialist guide belongs to the Websites root. It also connects to The Gold Standard of Education | Learning That Transfers into Life and the How X Works hub. The worked cases are original teaching examples; their numbers are stipulated so that the reasoning can be checked.
eduKateSG · Websites
Find your next learning step
Read the short answer first: locate the selected scroll or view timeline, resolve its named range, map the animation attachment range, and only then calculate effect progress. Keep the rendered property value separate from every intermediate percentage.
ROUTE 1 · CHAPTERS 1–4
Define the quantities
Name the quantities, reference conditions and reporting rules.
ROUTE 3 · CHAPTERS 9–12
Audit the evidence
Check instruments, algorithms, assumptions and rival explanations.
ROUTE 5 · CHAPTERS 17–20
Report and continue
Repair shortcuts, answer questions and follow verified routes.
Chapter contents
Define the quantities · Chapters 1–4
1. Name the timeline before reading progress
2. Separate timeline progress from effect progress
Work the mechanism · Chapters 5–8
5. Work the central attachment-range case
6. Trace boundaries before easing
Audit the evidence · Chapters 9–12
9. Audit axis and writing mode
10. Audit inactive and unresolved timelines
Transfer the reasoning · Chapters 13–16
13. Transfer to an oversized subject
14. Transfer to reverse scrolling
Report and continue · Chapters 17–20
17. Repair view range equals viewport visibility
18. Test with a minimal fixture
CHAPTER 1 OF 20 · Define the quantities
1. Name the timeline before reading progress
A scroll progress timeline maps a scroll container position across a finite interval. A view progress timeline instead tracks a subject as it crosses a scrollport. The animation effect receives time from the selected timeline; it does not invent an independent percentage.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
A fictional 1,200 px scroll range is at 480 px. On the full scroll timeline the raw position is 40%, before any animation attachment range narrows it.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Keep the 480 px offset and switch from a scroller timeline to a subject view timeline; identify every input that must be rebuilt.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
The current W3C documents are working drafts and implementation details can change.
CHAPTER 2 OF 20 · Define the quantities
2. Separate timeline progress from effect progress
Timeline progress locates the timeline. Effect progress also depends on the animation attachment range, delay-equivalent range boundaries, iteration count, direction and fill behaviour. Equal timeline positions can therefore produce different visual states.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
At timeline 40%, an effect attached from 20% to 80% is one-third through its attachment range: (40-20)/(80-20)=0.333.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Change only the attachment end from 80% to 60% and recompute the effect position.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
A visual screenshot alone does not reveal the computed timeline and range.
CHAPTER 3 OF 20 · Define the quantities
3. Keep named ranges attached to their geometry
Entry, exit, cover and contain ranges describe geometric relations for a view progress timeline. Their 0% and 100% boundaries are not aliases for the entire document scroll distance.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
A card enters a 600 px scrollport over 200 px of motion; the entry range can complete while the page remains far from its end.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Move the card without changing document height and predict which range boundaries move.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Writing modes, axes and subject size alter the geometry.
A scroll timeline can use a named source, nearest scroller or explicit axis. Choosing the wrong scroll container produces a valid but irrelevant progress value.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
A page contains an inner 400 px panel. Scrolling the document 500 px while the panel remains at offset 0 leaves the panel timeline at 0%.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Scroll only the panel and compare the two timelines.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Nested scrolling and overflow propagation require actual computed layout.
The attachment range is a coordinate transformation. Subtract the range start, divide by its span, then clamp or apply the animation model according to the specification and fill.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
For a full timeline position of 55%, animation-range 25% 85% gives (55-25)/60=50% attachment progress.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Hold 55% fixed and change the range to 40% 70%; the new progress is 50% again for a different geometric window.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Coincident numerical results do not prove the ranges are equivalent.
Easing transforms progress after the relevant interval has been located. It does not redefine the scroll or view range boundaries.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
With attachment progress 0.5, a stipulated ease-in curve may output 0.3 while the geometric progress remains 0.5.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Replace easing with linear and keep every range value fixed.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
The exact eased value requires the declared timing function.
Repeated iterations split the active interval. Alternate direction can reverse every other iteration even while the underlying timeline continues forward.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
At overall effect progress 75% with two alternate iterations, the second iteration is halfway through and runs in reverse.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Change iteration count from two to three without moving the scroll position.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Iteration boundaries can expose rounding and endpoint rules.
CHAPTER 8 OF 20 · Work the mechanism
8. Distinguish current time from rendered property value
The timeline supplies time; keyframes, easing, composition and underlying style determine the rendered property. A 60% time value does not mean every property is 60% of a numeric distance.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Opacity keyframes at 0, 30 and 100 percent produce a piecewise interpolation, while transform can use different offsets.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Keep current time fixed and alter only keyframe offsets.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Discrete properties and non-interpolable values do not follow numeric interpolation.
Block and inline axes depend on writing mode, while x and y are physical. A copied example can appear reversed or motionless when its axis assumption changes.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Compare block-axis progress in horizontal writing with vertical writing for the same physical scroll gesture.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Change only writing-mode and mark which coordinate definition changes.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Browser support for syntax and axes must be tested against the target environment.
A timeline may be inactive or its time unresolved when the source does not overflow, the subject or source is absent, or required geometry cannot be formed. Treat unresolved as a state, not zero.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Remove enough content so the source no longer scrolls; record unresolved progress rather than reporting 0% completion.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Restore overflow without changing the animation rules and check whether time resolves.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Fallback behaviour depends on the API and property being queried.
animation-range expands to start and end values. A one-value shorthand and a two-value shorthand can compute different boundaries even when a label looks familiar.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Expand a stipulated animation-range: entry 20% exit 80% into explicit start and end records before testing.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Omit the end component and compare the computed values defined by the current draft.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Always cite the specification version because draft grammar can evolve.
Images, fonts or inserted content can change source and subject geometry. The same pixel offset may then map to different timeline progress even without a user scroll.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Increase content above the subject by 180 px and recompute its view range while preserving the viewport.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Reserve the image space and repeat the comparison.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Scroll anchoring and snap realignment are separate mechanisms that may also adjust position.
When a subject is taller than the scrollport, cover and contain ranges do not behave like the same ranges for a small card. Some geometric phases may overlap or have reversed intuition.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Use a 900 px subject in a 600 px scrollport and sketch entry, cover and exit boundaries.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Reduce the subject to 300 px while keeping the scrollport fixed.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Use the specification algorithms rather than a memorised diagram.
Timeline progress can move backward when the scroll position reverses. Animation playback state and event observations must be interpreted with that direction visible.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Move from 70% to 50% timeline position and trace an alternate-direction two-iteration effect.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Set a negative playback rate in a Web Animations comparison and separate that from reverse scrolling.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Scripted seeking and user scrolling are distinct causes.
A design can respect reduced-motion preferences by suppressing nonessential motion or presenting an equivalent stable state. The underlying content and controls must remain usable.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Replace a parallax transform with a simple opacity reveal or no animation while preserving reading order.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Disable animation entirely and verify every link and explanation remains available.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Accessibility decisions require the actual user task, not a decorative rule alone.
CHAPTER 16 OF 20 · Transfer the reasoning
16. Repair scroll percentage equals animation percentage
The shortcut fails whenever the source, named range, attachment range, iterations or timing function changes. Report the chain instead of one ambiguous percentage.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
At document scroll 55%, show attachment progress 50% and eased output 30% as three labelled values.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Change only the attachment start and observe which labels change.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Developer tools may expose different intermediate values across browsers.
CHAPTER 17 OF 20 · Report and continue
17. Repair view range equals viewport visibility
A named view range is a geometric interval, not a universal percentage of visible area. Occlusion, clipping and transforms can also change what a person sees.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
A card can be in the contain range while another fixed panel covers part of it.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Remove the fixed overlay without changing the view timeline geometry.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Visibility and timeline geometry need separate tests.
Use one scroll source, one subject, one animation and visible debug labels for source offset, timeline time, attachment range and effect progress. Add complexity only after the mapping is reproduced.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Build a 600 px scroller with a 200 px subject and three fixed range configurations.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Move the animation to the document scroller and compare the receipts.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
A minimal fixture is evidence for the mechanism, not every production layout.
CHAPTER 19 OF 20 · Report and continue
19. Build a reproducible scroll-animation receipt
Record browser version, specification date, source, subject, axis, writing mode, scroll range, named range, attachment range, keyframes, timing function, iterations and reduced-motion state.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Package the 55%, 25–85% central example with computed and rendered observations.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Delete the source identity and ask whether another reader can reproduce the result.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Cross-browser support and draft changes require current testing.
A defensible report names the timeline and geometry, gives the attachment range and computed progress, then describes the rendered effect separately.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Write: “At source offset 660 px, the scroll timeline was 55%; within the 25–85% attachment range the effect progress was 50% before easing.”
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Ask which changed-context test distinguishes a range problem from a keyframe problem.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
The worked case is not a browser-conformance verdict.
Continue through the verified reading route
Scroll anchoring and snap realignment
Scroll anchoring and snap realignment. Use this when layout changes move the scroll position through anchoring or snap.
Scroll padding and scroll margin
Scroll padding and scroll margin. Use this for snapport and snap-area offsets rather than animation timing.
Field and laboratory performance
Field and laboratory performance. Use this when testing browser behaviour across controlled and real visits.
Frequently asked questions
Is document scroll percentage the same as animation progress?
Only when the selected timeline and attachment range make them coincide; named ranges, easing and iterations can separate them.
Does 50% progress mean the property is halfway?
Not necessarily. Keyframe offsets, easing, composition and discrete values control the rendered result.
What if the scroll source does not overflow?
The timeline can be inactive or unresolved; report that state rather than silently substituting zero.
Authoritative sources and further reading
W3C Scroll-driven Animations Level 1. Defines scroll and view progress timelines, named timeline ranges and animation attachment ranges.
W3C Web Animations Level 2. Defines overall animation progress and the timing model used by animation effects.
W3C CSS Animations Level 2. Defines animation-timeline and its relationship to named scroll and view timelines.
Return to the Websites subject guide, The Gold Standard of Education, or the How X Works hub.