-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
134 lines (93 loc) · 4.29 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
---
title: scroll-timeline-name
slug: Web/CSS/scroll-timeline-name
page-type: css-property
status:
- experimental
browser-compat: css.properties.scroll-timeline-name
---
{{CSSRef}}{{SeeCompatTable}}
The **`scroll-timeline-name`** [CSS](/en-US/docs/Web/CSS) property is used to define the name of a _named scroll progress timeline_, which is progressed through by scrolling a scrollable element (_scroller_) between top and bottom (or left and right). `scroll-timeline-name` is set on the scroller that will provide the timeline.
The name is then referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) declaration to indicate the container's element that is used to drive the progress of the animation through the scrolling action.
> [!NOTE]
> If the element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created.
The {{cssxref("scroll-timeline-axis")}} and `scroll-timeline-name` properties can also be set using the [`scroll-timeline`](/en-US/docs/Web/CSS/scroll-timeline) shorthand property.
## Syntax
```css
scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;
```
### Values
Allowed values for `scroll-timeline-name` are:
- `none`
- : The timeline has no name.
- `<dashed-ident>`
- : An arbitrary custom identifier defining a name for a scroll progress timeline, which can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) property.
> **Note:** [`<dashed-ident>`](/en-US/docs/Web/CSS/dashed-ident) values must start with `--`, which helps avoid name clashes with standard CSS keywords.
## Formal definition
{{cssinfo}}
## Formal syntax
{{csssyntax}}
## Examples
### Creating a named scroll progress timeline animation
In this example, a scroll timeline named `--squareTimeline` is defined using the `scroll-timeline-name` property on the element with the ID `container`.
This is then applied to the animation on the `#square` element using `animation-timeline: --squareTimeline`.
#### HTML
The HTML for the example is shown below.
```html
<div id="container">
<div id="square"></div>
<div id="stretcher"></div>
</div>
```
#### CSS
The CSS for the container sets it as the source of a scroll timeline named `--squareTimeline` using the `scroll-timeline-name` property. No [scrollbar axis](/en-US/docs/Web/CSS/scroll-timeline-axis) is defined here because the vertical axis will be used by default.
The height of the container is set to `300px`, and the container is also set to create a vertical scrollbar if it overflows (the CSS `height` rule on the `stretcher` element below does make the content overflow its container).
```css
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline-name: --squareTimeline;
position: relative;
}
```
The CSS below defines a square that rotates according to the timeline provided by the `animation-timeline` property, which is set to the `--squareTimeline` timeline named above.
```css
#square {
background-color: deeppink;
width: 100px;
height: 100px;
margin-top: 100px;
animation-name: rotateAnimation;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
animation-timeline: --squareTimeline;
position: absolute;
bottom: 0;
}
#stretcher {
height: 600px;
background: #dedede;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
```
The `stretcher` CSS rule sets the block height to `600px`, which creates content that overflows the container element, thereby creating scroll bars.
Without this element, the content would not overflow the container, there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline.
#### Result
Scroll the vertical bar to see the square animate as you scroll.
{{EmbedLiveSample("Creating_a_named_scroll_progress_timeline_animation", "100%", "320px")}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline)
- [`scroll-timeline`](/en-US/docs/Web/CSS/scroll-timeline), [`scroll-timeline-axis`](/en-US/docs/Web/CSS/scroll-timeline-axis)
- {{cssxref("timeline-scope")}}
- [CSS scroll-driven animations](/en-US/docs/Web/CSS/CSS_scroll-driven_animations)