timeline-trigger-active-range-start CSS property - CSS

Syntax

css

/* Keyword */
timeline-trigger-active-range-start: auto;
timeline-trigger-active-range-start: normal;

/* <length-percentage> */
timeline-trigger-active-range-start: 10%;
timeline-trigger-active-range-start: 50px;

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

/* Named timeline range plus offset */
timeline-trigger-active-range-start: entry 5%;
timeline-trigger-active-range-start: contain 100px;

/* Multiple range start values */
timeline-trigger-active-range-start:
  contain,
  entry 5%;

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

Values

Specified as one or more values, separated by commas. Possible values are:

auto: The timeline-trigger-active-range-start property is set to the same value as the timeline-trigger-activation-range-start property. This is the default value.
normal: Equivalent to cover 0% for a view progress timeline timeline-trigger-source, and scroll 0% for a scroll progress timeline timeline-trigger-source.
<length-percentage>: Specifies a length or percentage value measured from the beginning of the normal timeline.
<timeline-range-name>: Specifies the start (0%) of the named 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 timeline range if one is specified, or the timeline represented by normal if not.

Description

When creating CSS scroll-triggered animations, the timeline-trigger-active-range-start property can be set to explicitly define the start of the trigger's active range.

The default value is auto, which sets the timeline-trigger-active-range-start value to the same as the timeline-trigger-activation-range-start.

A value of normal is equivalent to cover 0% for a view progress timeline timeline-trigger-source, and scroll 0% for a scroll progress timeline timeline-trigger-source.

If the <timeline-range-name> value does not include a <length-percentage>, it defaults to 0% of the named timeline range. If a <timeline-range-name> is not included, the timeline range defaults to cover for a view progress timeline source, and scroll for a scroll progress timeline source.

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

Specifying multiple range start values

When you specify multiple comma-separated values on a single timeline-trigger-active-range-start property, they are applied to the timeline triggers in the order in which the timeline-trigger-names appear. When the number of triggers and timeline-trigger-active-range-start 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-start value is set, the timeline-trigger-active-range-start will apply to all the timeline-trigger-names. If two timeline-trigger-active-range-start values are set, they will cycle between the timeline-trigger-names until all of them have a timeline-trigger-active-range-start value set. And so on.

Consider these declarations:

css

timeline-trigger-name: --my-trigger, --my-other-trigger, --another-trigger;
timeline-trigger-active-range-start:
  contain,
  entry 5%;

In this case, --my-trigger will use the contain range start and --my-other-trigger will use the entry 5% range start. As there are three names but only two range starts, the range starts are cycled, so the third trigger name, --another-trigger, will use the contain range start.

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-start = 
  [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#  

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

Examples

Basic usage

In this example, we inset the start of a scroll-triggered animation trigger's active range by setting a custom timeline-trigger-active-range-start value.

HTML

Our markup contains two <div> elements, one to animate and one on which to create a trigger, plus some basic text content to cause the page to scroll. We have hidden the text content for brevity.

html

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

...

<div class="trigger">I create the trigger</div>

...

<div class="animated">I am animated</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>

<div class="trigger">I create the trigger</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>

CSS

The animated <div> element's position is set to fixed, positioning it near the top-left of the scrollport to enable us to see when its animation starts and stops.

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;
}

Next, we define the @keyframes for the rotate animation we will use later:

css

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

  to {
    rotate: 360deg;
  }
}

Using the animation shorthand, the .animated element has the rotate animation applied. Without an associated trigger, the element would start animating when the page loads. The animation-trigger property makes it a triggered animation. The value references a timeline-trigger-name of --t and specifies 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;
}

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

A timeline-trigger-name with value --t, which is equal to the identifier referenced in the animated <div>'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 of contain 30% contain 60%, which sets the trigger's activation range to a small portion of the contain range.
A timeline-trigger-active-range-start of cover 0%. When not explicitly set, the timeline-trigger-active-range-end value defaults to the timeline-trigger-activation-range-end value — contain 60% — so we end up with an overall timeline-trigger-active-range of cover 0% contain 60%.

css

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
  timeline-trigger-activation-range: contain 30% contain 60%;
  timeline-trigger-active-range-start: cover 0%;
}

@supports not (timeline-trigger-active-range-start: cover 0%) {
  body::before {
    content: "Your browser does not support the timeline-trigger-active-range-start 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. The animation plays when the tracked <div> moves into the narrow activation range between 30% and 60% of the way through the timeline range. It will then pause as soon as the tracked <div> goes above the 60% point.

When you scroll downwards again, the animation will start when the tracked element reaches the 60% point; you can now scroll the tracked element completely off the bottom of the scrollport before the animation will pause again. This is because we extended the start of the active range, but not the end.

Specifications

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

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

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