timeline-trigger-active-range-end CSS property

Syntax

css

/* Keywords */
timeline-trigger-active-range-end: auto;
timeline-trigger-active-range-end: normal;

/* <length-percentage> */
timeline-trigger-active-range-end: 80%;
timeline-trigger-active-range-end: 400px;

/* Named timeline range */
timeline-trigger-active-range-end: contain;
timeline-trigger-active-range-end: exit;

/* Named timeline with <length-percentage> */
timeline-trigger-active-range-end: exit -10px;
timeline-trigger-active-range-end: contain 110%;

/* Multiple range end values */
timeline-trigger-active-range-end:
  contain 110%,
  exit -10px;

/* Global values */
timeline-trigger-active-range-end: inherit;
timeline-trigger-active-range-end: initial;
timeline-trigger-active-range-end: revert;
timeline-trigger-active-range-end: revert-layer;
timeline-trigger-active-range-end: unset;

Values

This property is specified as a comma-separated list of the following values:

auto: Specifies the value of the timeline-trigger-activation-range-end property. This is the default value.
normal: Specifies the end, or 100%, of the normal range. Equivalent to cover 100% for a view progress timeline timeline-trigger-source, and scroll 100% for a scroll progress timeline.
<length-percentage>: Specifies a length or percentage value measured from the beginning of the normal timeline. Percentages are relative to the length of the normal timeline range.
<timeline-range-name>: Specifies the end, or 100%, of the cover, contain, entry, exit, entry-crossing, exit-crossing, or scroll timeline range.
<timeline-range-name> <length-percentage>: Specifies a length or percentage value measured from the beginning of the specified named timeline range. Percentages are relative to the length of the named range.

The timeline-trigger-active-range-end property can be used to explicitly set the end of a trigger's active range to a value equal to or further along the timeline than the timeline-trigger-activation-range-end, which specifies the end of the trigger's activation range.

The active range is the range within which a trigger remains activated once activation has occurred. Activation occurs when the tracked element enters the activation range and deactivation occurs when it leaves the active range. By default, the active range ends where the activation range ends. This property creates a buffer zone and is used to prevent premature resetting when a user scrolls back and forth across the activation range's endpoint. Only when a tracked element moves out of the active range does the trigger become inactive.

The default value of timeline-trigger-active-range-end is auto, which sets the value to the same named range and offset as the timeline-trigger-activation-range-end. When specified as a timeline range, offset, or both, this property sets the end of the active range to a point that is independent of the timeline-trigger-activation-range-end value. If the value doesn't extend the end of the activation range, it has no effect.

The value of normal sets the end of the active range to the end of the default named range, resolving to either cover 100% for a view progress timeline (the timeline-trigger-source is set to a view() function) or scroll 100% for a scroll progress timeline (the timeline-trigger-source is set to a scroll() function).

Other values of the timeline-trigger-active-range-end property can be used to set:

An offset from the normal range: A <length> or <percentage> value specifies an offset from the beginning of the normal timeline, which again defaults to either coveror scroll. Negative values outset the end, resulting in a longer active range. Positive values inset the end of the active range, making it shorter.
The end of a specific named range: A <timeline-range-name> value specifies a 100% offset from the start of the named timeline range, which is either cover, contain, entry, exit, entry-crossing, exit-crossing, or scroll. See Understanding timeline range names.
An offset from a specific named range: When both a <timeline-range-name> and <length> or <percentage> value are specified, the end is offset by the distance specified from the start of the named range. Percentage values are relative to the range specified. See Setting insets using percentages.

If the value is set to a point prior to the end of the activation range, the value of the timeline-trigger-activation-range-end is used, as if the value were set to auto.

The timeline-trigger-active-range-end property, along with the timeline-trigger-active-range-start property, can also be set using the timeline-trigger-active-range shorthand, which in turn can be set using the timeline-trigger shorthand.

Specifying multiple range end values

When you specify multiple comma-separated values in a single timeline-trigger-active-range-end declaration, they apply to the timeline triggers in the order in which they appear in the timeline-trigger-name property. When the number of triggers and timeline-trigger-active-range-end property values do not match, they are applied in the same way as multiple animation property values.

For example, if multiple timeline-trigger-name values are set, but only a single timeline-trigger-active-range-end value is set, the timeline-trigger-active-range-end will apply to all the timeline-trigger-names. If two or more timeline-trigger-active-range-end values are set, they will cycle between the timeline-trigger-names until every timeline trigger has a timeline-trigger-active-range-end value set.

Consider these declarations:

css

timeline-trigger-name: --my-trigger, --my-other-trigger, --another-trigger;
timeline-trigger-active-range-end:
  110%,
  exit 300px;

In this case, --my-trigger will use the 110% range end and --my-other-trigger will use the exit 300px range end. As there are three names but only two range ends, the range ends are cycled, so the third trigger name, --another-trigger, will use the 110% range end.

Formal definition

Initial value	`auto`
Applies to	all elements
Inherited	no
Percentages	Relative to the specified named timeline range if specified, otherwise relative to the entire timeline
Computed value	A list where each item may be 'normal', a length percentage, or a timeline range name and a length percentage
Animation type	Not animatable

Formal syntax

timeline-trigger-active-range-end = 
  [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#  

<length-percentage> = 
  <length>      |
  <percentage>

Examples

Basic usage

This example demonstrates the effect of extending a trigger's active range. It compares two identical triggered animations, with the end of one animation trigger's active range outset using the timeline-trigger-active-range-end property.

HTML

The markup contains four <div> elements — two to animate and two to create a trigger on — plus some basic text content to cause the page to scroll. The text content is hidden for brevity.

html

<div class="animated">I am animated</div>
<div class="animated longer">I am animated longer</div>

...
<section>
  <div class="trigger">I create the trigger</div>
  <div class="trigger longer">I create a longer trigger</div>
</section>
...

<div class="animated">I am animated</div>
<div class="animated longer">I am animated longer</div>
<p>
  Fusce dictum ex quis ipsum consectetur placerat. Cras sed lectus ex. Quisque
  purus dolor, vulputate ac mi eget, commodo varius odio. Suspendisse faucibus
  ipsum vel libero finibus, in placerat nibh congue. Sed iaculis, metus et
  euismod posuere, mi diam vestibulum felis, ac vulputate eros ipsum id justo.
  Etiam a tincidunt purus. Maecenas semper sed enim at blandit. Aenean ut
  sagittis lorem, eget gravida purus. Phasellus eleifend, lectus nec pulvinar
  facilisis, dui dolor feugiat odio, iaculis tempor felis est non tortor. In
  suscipit lorem efficitur molestie tempus. Integer sit amet neque et risus
  iaculis sodales sed eget diam. Quisque sodales nunc sapien, vitae lacinia ex
  luctus quis. Maecenas scelerisque scelerisque elit eu consequat. Etiam ac
  tristique tellus, sed tincidunt velit.
</p>

<p>
  Fusce dictum ex quis ipsum consectetur placerat. Cras sed lectus ex. Quisque
  purus dolor, vulputate ac mi eget, commodo varius odio. Suspendisse faucibus
  ipsum vel libero finibus, in placerat nibh congue. Sed iaculis, metus et
  euismod posuere, mi diam vestibulum felis, ac vulputate eros ipsum id justo.
  Etiam a tincidunt purus. Maecenas semper sed enim at blandit. Aenean ut
  sagittis lorem, eget gravida purus. Phasellus eleifend, lectus nec pulvinar
  facilisis, dui dolor feugiat odio, iaculis tempor felis est non tortor. In
  suscipit lorem efficitur molestie tempus. Integer sit amet neque et risus
  iaculis sodales sed eget diam. Quisque sodales nunc sapien, vitae lacinia ex
  luctus quis. Maecenas scelerisque scelerisque elit eu consequat. Etiam ac
  tristique tellus, sed tincidunt velit.
</p>

<section>
  <div class="trigger">I create the trigger</div>
  <div class="trigger longer">I create a longer trigger</div>
</section>
<p>
  Fusce dictum ex quis ipsum consectetur placerat. Cras sed lectus ex. Quisque
  purus dolor, vulputate ac mi eget, commodo varius odio. Suspendisse faucibus
  ipsum vel libero finibus, in placerat nibh congue. Sed iaculis, metus et
  euismod posuere, mi diam vestibulum felis, ac vulputate eros ipsum id justo.
  Etiam a tincidunt purus. Maecenas semper sed enim at blandit. Aenean ut
  sagittis lorem, eget gravida purus. Phasellus eleifend, lectus nec pulvinar
  facilisis, dui dolor feugiat odio, iaculis tempor felis est non tortor. In
  suscipit lorem efficitur molestie tempus. Integer sit amet neque et risus
  iaculis sodales sed eget diam. Quisque sodales nunc sapien, vitae lacinia ex
  luctus quis. Maecenas scelerisque scelerisque elit eu consequat. Etiam ac
  tristique tellus, sed tincidunt velit.
</p>

<p>
  Fusce dictum ex quis ipsum consectetur placerat. Cras sed lectus ex. Quisque
  purus dolor, vulputate ac mi eget, commodo varius odio. Suspendisse faucibus
  ipsum vel libero finibus, in placerat nibh congue. Sed iaculis, metus et
  euismod posuere, mi diam vestibulum felis, ac vulputate eros ipsum id justo.
  Etiam a tincidunt purus. Maecenas semper sed enim at blandit. Aenean ut
  sagittis lorem, eget gravida purus. Phasellus eleifend, lectus nec pulvinar
  facilisis, dui dolor feugiat odio, iaculis tempor felis est non tortor. In
  suscipit lorem efficitur molestie tempus. Integer sit amet neque et risus
  iaculis sodales sed eget diam. Quisque sodales nunc sapien, vitae lacinia ex
  luctus quis. Maecenas scelerisque scelerisque elit eu consequat. Etiam ac
  tristique tellus, sed tincidunt velit.
</p>

CSS

The .animated elements' position is set to fixed, positioning them near the top-left of the scrollport to enable us to see when their animations start and stop.

body {
  width: 80%;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

css

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}
.animated.longer {
  left: 150px;
}
section {
  display: flex;
  gap: 20px;
}

Next, we define the @keyframes for a rotate animation:

css

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

Using the animation shorthand, the rotate animation is applied to the .animated elements. Without an associated trigger, the elements would start animating when the page loads. The animation-trigger property makes it a triggered animation. The values reference a timeline-trigger-name of --t and --longerT, respectively, and define two <animation-action> values — play and pause — which specify that the animation will play on activation and pause on deactivation.

css

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}
.animated.longer {
  animation-trigger: --longerT play pause;
}

The .trigger element creates the .animated element's trigger via the following properties:

A timeline-trigger-name with value --t, which is equal to the identifier referenced in the .animated element's animation-trigger property value, associating the two together.
A timeline-trigger-source with value view(), which sets the timeline trigger as a view progress timeline, and the element providing the timeline trigger as the nearest scrolling ancestor element.
A timeline-trigger-activation-range-end of contain 50%. The contain range spans from when the trigger element has completely entered the scrollport to when it starts to leave. This value sets the trigger's activation range to end 50% through it, which occurs when it is vertically centered in the scrollport.

The .trigger.longer element creates the .animated.longer element's trigger via the following properties:

A timeline-trigger-name with value --longerT (overriding the --t), which is equal to the identifier referenced in the .animated.longer element's animation-trigger property value, associating the two together.
A timeline-trigger-active-range-end of cover 100%. The cover range spans from when the trigger element first starts to enter the scrollport to when it has completely left it.

css

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
  timeline-trigger-activation-range-end: contain 50%;
}
.trigger.longer {
  timeline-trigger-name: --longerT;
  timeline-trigger-active-range-end: cover 100%;
}

@supports not (timeline-trigger-active-range-end: cover 100%) {
  body::before {
    content: "Your browser does not support the timeline-trigger-active-range-end property.";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Result

Try scrolling the content up. Both animations start playing when the tracked .trigger elements first enter into view. The animation of one element pauses when the trigger is at 50% of the contain timeline. The other element only pauses when the trigger has fully exited the viewport.

When you scroll downward again, after both animations have paused, both animations will restart when the trigger elements reach the 50% point. This is because the active range extends how long the trigger remains active, but does not change where activation occurs.

Specifications

Specification
Animation Triggers # propdef-timeline-trigger-active-range-end

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Oct 5, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content