This tool has several versions:
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.
animation.effect.getComputedTiming().progress * 100
For each of the methods someting is to say:
⚠️ Your browser does not support Scroll-Linked Animations so these demos will not work. Please use Chrome 115 or newer.