Animation-timeline – timeline-scope
HTML
index.html <div class="scroller">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.</p>
</div>
<figure class="scroll-watcher">
<div class="timer-wrapper">
</div>
<figcaption class="caption"></figcaption>
</figure>
CSS
style.css @property --progress {
syntax: "<integer>";
initial-value: 0;
inherits: true;
}
@layer demo {
body {
timeline-scope: --my-scroller;
}
.scroller {
scroll-timeline-name: --my-scroller;
scroll-timeline-axis: block;
}
:is(.scroll-watcher, .timer-wrapper, .timer-wrapper::before) {
animation-fill-mode: both;
animation-timing-function: linear;
animation-timeline: --my-scroller;
}
.timer-wrapper {
--size: 200px;
width: var(--size);
height: var(--size);
border-radius: 100vmax;
position: relative;
background: hsla(0 0 0 / 80%);
animation-name: progress-anim;
box-shadow: inset 0 0 0px 9px gray;
&::before {
content: "";
position: absolute;
background: conic-gradient(
from 0,
white calc(var(--progress) * 1%),
transparent 0
);
border-radius: 100vmax;
height: var(--size);
width: var(--size);
mask: radial-gradient(circle at 50% 50%, transparent 65%, white 65%);
}
}
@keyframes progress-anim {
to {
--progress: 100;
}
}
}
@layer demoStyles {
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
flex-direction: row;
color: white;
}
p {
margin-block: 2rem;
}
.scroller {
width: 300px;
height: 400px;
overflow-y: auto;
}
}