About this tool

This tool is part of https://scroll-driven-animations.style/ and should help you get a grasp of how all View Timeline Progress works.

The scroller depicted contains a subject (a red/green box) that is being tracked using a View Timeline.

Use the controls at the top to tweak the range (cover, contain, entry, entry-crossing, exit, exit-crossing), range-start and range-end position (fixed to 20% and 80% respectively). When the subject is in view of the selected range, it will turn green. When outside, it will be red.

Shown in the scroller a three values, read through JavaScript:

1. The animation.currentTime.value
2. The animation.timeline.getCurrentTime(animation.rangeStart.rangeName)
3. The animation.effect.getComputedTiming().progress * 100

For each of the methods someting is to say:

1. This value is only correct for the cover range
2. This value is only correct when the range-start and range-end are 0% and 100% respectively and if the range-start and range-end target the same range-name.
3. This value will give you the correct effect progress. Do take animation.playState into account though; if that is finished return a value of 100