You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* CSS: Revise `view()` function
Updated the documentation for the `view()` CSS function to clarify its parameters and usage in animation timelines. Enhanced explanations of axis and inset parameters, and improved examples.
* broken links and grammar
* Implement no-support layer for animation-timeline
Add fallback message for unsupported animation-timeline view
* Update files/en-us/web/css/reference/properties/animation-timeline/view/index.md
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Add padding to unsupported browser message
* Apply suggestions from code review
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
* Update files/en-us/web/css/reference/properties/animation-timeline/view/index.md
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Clarify usage of scroll() with animation-timeline (mdn#42301)
* Update files/en-us/web/css/reference/properties/animation-timeline/view/index.md
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Clarify description of animation timeline elements
* Clarify example for anonymous view progress timeline
Updated the example section to clarify the creation of an anonymous view progress timeline using the `view()` function.
* Apply suggestion from @dipikabh
---------
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
The **`scroll()`**[CSS function](/en-US/docs/Web/CSS/Reference/Values/Functions) can be used to define the scroller and axis of an [anonymous scroll progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#anonymous_scroll_progress_timelines).
9
+
The **`scroll()`**[CSS function](/en-US/docs/Web/CSS/Reference/Values/Functions) can be used with the {{cssxref("animation-timeline")}} property to create an [anonymous scroll progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#anonymous_scroll_progress_timelines), defining the scroller and axis of the timeline.
The **`view()`**[CSS function](/en-US/docs/Web/CSS/Reference/Values/Functions) can be used with {{cssxref("animation-timeline")}} to indicate a subject element that will provide an anonymous view progress timeline to animate. The view progress timeline is progressed through by a change in visibility of the subject element inside the nearest ancestor scroller. The visibility of the subject inside the scroller is tracked — by default, the timeline is at 0% when the subject is first visible at one edge of the scroller, and 100% when it reaches the opposite edge.
10
-
11
-
The function parameters can specify the scrollbar axis along which timeline progress will be tracked and an inset that adjusts the position of the box in which the subject is deemed to be visible.
12
-
13
-
> [!NOTE]
14
-
> If the indicated axis does not contain a scrollbar, then the animation timeline will be inactive (have zero progress).
15
-
16
-
> [!NOTE]
17
-
> Each use of `view()` corresponds to its own unique instance of {{domxref("ViewTimeline")}} in the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API).
9
+
The **`view()`**[CSS function](/en-US/docs/Web/CSS/Reference/Values/Functions) is used with the {{cssxref("animation-timeline")}} property to create an [anonymous view progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#anonymous_view_progress_timelines_the_view_function) based on when an element comes into view inside its nearest {{glossary("scroll container")}}. You can adjust the tracking axis and the optional insets to control when the element is considered "in view".
- : The scrollbar axis value can be any one of the following:
50
-
-`block`
51
-
- : The scrollbar on the block axis of the scroll container, which is the axis in the direction perpendicular to the flow of text within a line.
52
-
For horizontal writing modes, such as standard English, this is the same as `y`, while for vertical writing modes, it is the same as `x`. This is the default value.
53
-
-`inline`
54
-
- : The scrollbar on the inline axis of the scroll container, which is the axis in the direction parallel to the flow of text in a line.
55
-
For horizontal writing modes, this is the same as `x`, while for vertical writing modes, this is the same as `y`.
56
-
-`y`
57
-
- : The scrollbar on the vertical axis of the scroll container.
58
-
-`x`
59
-
- : The scrollbar on the horizontal axis of the scroll container.
60
-
61
-
- inset
62
-
- : The inset value can be one or two values, which can be either `auto` or a {{cssxref("length-percentage")}}. It specifies an inset (positive) or outset (negative) adjustment of the [scrollport](/en-US/docs/Glossary/Scroll_container#scrollport). The inset is used to determine whether the element is in view which determines the length of the animation timeline. In other words, the animation lasts as long as the element is in the inset-adjusted view.
63
-
- start
64
-
- : Inward offset from beginning of the scrollport.
65
-
- end
66
-
- : Inward offset from end of the scrollport.
67
-
68
-
> [!NOTE]
69
-
> The scroller and inset values can be specified in any order.
38
+
-`<axis>`
39
+
- : Specifies the scroll direction used by the view progress timeline. The value can be one of the {{cssxref("axis")}} keywords: `block`, `inline`, `x`, or `y`. The default value is `block`.
40
+
-`<view-timeline-inset>`
41
+
- : Specifies the inset area that defines when an element is considered "in view". The value can be the keyword `auto` or up to two {{cssxref("length-percentage")}} values.
42
+
43
+
## Description
44
+
45
+
A view progress timeline progresses based on changes in the visibility of a subject element inside its nearest scroll container. The `view()` function is used with the {{cssxref("animation-timeline")}} property to create such a view progress timeline.
46
+
47
+
The function's parameters can specify the scrollbar axis along which timeline progress is tracked and insets that adjust the position of the box in which the subject is considered visible.
48
+
49
+
-**Axis**: By default, `view()` uses the block axis. You can change this by providing an explicit `<axis>` value. If the chosen axis does not contain a scrollbar, then the animation timeline will be inactive (zero progress).
50
+
-**Inset**: By default, the timeline is at `0%` (the `from` keyframe in the {{cssxref("@keyframes")}} animation) when the subject is first visible at one edge of the scroller, and at `100%` (the `to` keyframe) when the subject's outer border edge reaches the opposite edge of the scroller. You can control these points with the `<view-timeline-inset>` parameters.
51
+
The animation lasts as long as the element is in the inset-adjusted view. The inset is used to determine whether the element is in view, which in turn determines the length of the animation timeline. The inset consists of up to two values, each of which can be either `auto` or a {{cssxref("length-percentage")}}.
52
+
- The first value defines the start, an inward offset from the scrollport's beginning.
53
+
- The second value, if present, specifies the end, an inward offset from the scrollport's end. If the value is greater than `0`, it specifies an inset (positive). A negative value defines an outset adjustment to the [scrollport](/en-US/docs/Glossary/Scroll_container#scrollport).
54
+
55
+
The axis and inset components can be specified in any order. Within the inset component, the first value defines the start inset, and the second value defines the end inset.
70
56
71
57
## Formal syntax
72
58
73
59
{{CSSSyntax}}
74
60
75
61
## Examples
76
62
77
-
### Setting an anonymous view progress timeline
63
+
### Creating an anonymous view progress timeline using `view()`
78
64
79
-
An anonymous view progress timeline is set on an element with class`subject` using `animation-timeline: view()`. The result is that the `subject`element animates as it moves upwards through the document as it is scrolled.
65
+
In this example, we create an anonymous view progress timeline for the element with the`subject`and `animation` classes using `animation-timeline: view()`. The result is that as you scroll the document, this element animates as it moves upward through the document.
80
66
81
67
#### HTML
82
68
@@ -122,7 +108,7 @@ The HTML for the example is shown below.
122
108
123
109
#### CSS
124
110
125
-
The `subject`element and `content`elements are minimally styled and the text content is given some basic font settings:
111
+
The `subject` and `content`classes are minimally styled, and the text content has some basic font settings:
126
112
127
113
```css
128
114
.subject {
@@ -143,7 +129,7 @@ p {
143
129
}
144
130
```
145
131
146
-
To aid the understanding of the result, extra elements `subject-container`, `top`, and `bottom` have been used. The `subject-container` shows the bounds of the animation. And semi-transparent `top` and `bottom` overlays mark inset offsetted scrollport.
132
+
To help show the result, we've defined a few extra classes. The `subject-container`class shows the bounds of the animation. And the semi-transparent `top` and `bottom` overlays mark inset-adjusted scrollport.
147
133
148
134
```css
149
135
.subject-container {
@@ -175,18 +161,16 @@ To aid the understanding of the result, extra elements `subject-container`, `top
175
161
}
176
162
```
177
163
178
-
In the following code, the `<div>` with the class of `subject` is also given a class of `animation`. The `grow` animation causes the `subject` element to grow or shrink. The `animation-timeline: view(block 55% 10%)`is set to declare that it will be animated as it progresses through the view progress timeline provided by its scrolling ancestor (in this case the document's root element).
164
+
The `<div>`element with the `subject`class is also given a class of `animation`. The `grow` animation causes the `subject` element to grow or shrink. The `animation-timeline: view(block 55% 10%)`rule sets the element to be animated as it progresses through the view progress timeline created by its nearest scroll container (in this case, the document's root element).
179
165
180
-
While scrolling down, note how the inset value of `50% 10%`causes the animation to start at 10% from the bottom and finish at 50% from the top. As animation moves forward along the timeline the `subject` grows. Conversely, when scrolling up the animation proceeds in the reverse direction, starting at 50% from the top, moving backward through the animation, and ending at 10% from the bottom. So, as the animation happens backwards the `subject` shrinks.
166
+
While scrolling down, note how the inset values `50% 10%`cause the animation to start when the element is 10% from the bottom of the scrollport and to finish when it is 50% from the top. As the animation progresses along the timeline, the `subject` grows. Conversely, when scrolling up, the animation proceeds in reverse, starting at 50% from the top, moving backward through the keyframes, and ending at 10% from the bottom. So, as the animation runs backward, the `subject` shrinks.
181
167
182
-
An important point to remember is that the animation lasts as long as the `subject` element is in the view which has been set and to be offset using`50% 10%` inset values.
168
+
An important point to remember is that the animation lasts only as long as the `subject` element is within view, which is defined here by`50% 10%` inset values.
183
169
184
170
```css
185
171
.animation {
186
172
animation-timeline: view(block50%10%);
187
-
188
173
animation-name: grow;
189
-
animation-fill-mode: both;
190
174
animation-duration: 1ms; /* Firefox requires this to apply the animation */
191
175
animation-timing-function: linear;
192
176
}
@@ -202,11 +186,25 @@ An important point to remember is that the animation lasts as long as the `subje
202
186
}
203
187
```
204
188
189
+
```css hidden
190
+
@layer no-support {
191
+
@supportsnot (animation-timeline: view()) {
192
+
body::before {
193
+
content: "Your browser doesn't support the CSS `view()` function.";
194
+
background-color: wheat;
195
+
display: block;
196
+
text-align: center;
197
+
padding: 1em;
198
+
}
199
+
}
200
+
}
201
+
```
202
+
205
203
#### Result
206
204
207
-
Scroll to see the subject element being animated.
205
+
Scroll to see the element with the `subject` class animate as it enters and leaves the adjusted inset view.
208
206
209
-
{{EmbedLiveSample("Setting an anonymous view progress timeline", "100%", "480px")}}
207
+
{{EmbedLiveSample("Examples", "100%", "480px")}}
210
208
211
209
## Specifications
212
210
@@ -218,6 +216,10 @@ Scroll to see the subject element being animated.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments