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 Ranges work.

• cover: Represents the full range of the view progress timeline.
• entry: Represents the range during which the principal box is entering the view progress visibility range.
• exit: Represents the range during which the principal box is exiting the view progress visibility range.
• entry-crossing: Represents the range during which the principal box crosses the end border edge.
• exit-crossing: Represents the range during which the principal box crosses the start border edge.
• contain: Represents the range during which the principal box is either fully contained by, or fully covers, its view progress visibility range within the scrollport. This depends on whether the subject is taller or shorter than the scroller.

Use the controls at the top right of the page to see how choosing a different setting affects the start and end positions when an animation runs.