Version selector

This tool has several versions:

  1. Single range progress
  2. All-in-one
🏠

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

⚠ī¸ Your browser does not support Scroll-Linked Animations so these demos will not work. Please use Chrome 115 or newer.

0% 0%