Skip to content

Commit 060574c

Browse files
stephenmcgruerstephenmcgruer
committed
Bikeshed update for 'Use prefers-reduced-motion: no-preference in examples (w3c#45)' [ci skip]
Generated from: commit 544a507 Author: Stephen McGruer <stephen.mcgruer@gmail.com> Date: Mon Mar 25 09:43:16 2019 -0400 Use prefers-reduced-motion: no-preference in examples (w3c#45)
1 parent 544a507 commit 060574c

1 file changed

Lines changed: 108 additions & 96 deletions

File tree

‎index.html‎

Lines changed: 108 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link href="https://www.w3.org/StyleSheets/TR/2016/W3C-UD" rel="stylesheet" type="text/css">
1212
<meta content="Bikeshed version 8ac92da89bb2253e0da87e20a9b9caa745f5f5b6" name="generator">
1313
<link href="https://wicg.github.io/scroll-animations/" rel="canonical">
14-
<meta content="c1bd9453edbce99b73ef9fa224bf365e24e9ebc0" name="document-revision">
14+
<meta content="544a50729592c840896d6d8164856d311ff4ccf1" name="document-revision">
1515
<link href="web-animations.css" rel="stylesheet" type="text/css">
1616
<style>/* style-md-lists */
1717

@@ -445,50 +445,54 @@ <h4 class="heading settled" data-level="2.3.1" id="scrollable-animation-usecase"
445445
<figcaption> A scrollable movie.<br> The left figure shows the initial position of the balls<br> The right figure shows them after they have collided. </figcaption>
446446
</figure>
447447
<p>Using the CSS markup:</p>
448-
<pre class="lang-css highlight"><c- f>div.circle </c-><c- p>{</c->
449-
<c- k>animation-duration</c-><c- p>:</c-> <c- m>1</c-><c- l>s</c-><c- p>;</c->
450-
<c- k>animation-timing-function</c-><c- p>:</c-> linear<c- p>;</c->
451-
<c- k>animation-timeline</c-><c- p>:</c-> <c- nf>scroll</c-><c- p>(</c-><c- nf>element</c-><c- p>(</c->#container<c- p>),</c-> vertical<c- p>,</c-> <c- s>"200px"</c-><c- p>,</c-> <c- s>"300px"</c-><c- p>);</c->
452-
<c- p>}</c->
453-
<c- f>#left-circle </c-><c- p>{</c->
454-
<c- k>animation-name</c-><c- p>:</c-> left-circle<c- p>;</c->
455-
<c- p>}</c->
456-
<c- f>#right-circle </c-><c- p>{</c->
457-
<c- k>animation-name</c-><c- p>:</c-> right-circle<c- p>;</c->
458-
<c- p>}</c->
459-
<c- f>#union-circle </c-><c- p>{</c->
460-
<c- k>animation-name</c-><c- p>:</c-> union-circle<c- p>;</c->
461-
<c- k>animation-timeline</c-><c- p>:</c-> <c- nf>scroll</c-><c- p>(</c-><c- nf>element</c-><c- p>(</c->#container<c- p>),</c-> vertical<c- p>,</c-> <c- s>"250px"</c-><c- p>,</c-> <c- s>"300px"</c-><c- p>);</c->
462-
<c- p>}</c->
463-
<c- n>@keyframes</c-> left-circle <c- p>{</c->
464-
<c- f>to </c-><c- p>{</c-> <c- k>transform</c-><c- p>:</c-> <c- nf>translate</c-><c- p>(</c-><c- m>300</c-><c- l>px</c-><c- p>)</c-> <c- p>}</c->
465-
<c- p>}</c->
466-
<c- n>@keyframes</c-> right-circle <c- p>{</c->
467-
<c- f>to </c-><c- p>{</c-> <c- k>transform</c-><c- p>:</c-> <c- nf>translate</c-><c- p>(</c-><c- m>350</c-><c- l>px</c-><c- p>)</c-> <c- p>}</c->
468-
<c- p>}</c->
469-
<c- n>@keyframes</c-> union-circle <c- p>{</c->
470-
<c- f>to </c-><c- p>{</c-> <c- k>opacity</c-><c- p>:</c-> <c- m>1</c-> <c- p>}</c->
471-
<c- p>}</c->
448+
<pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->prefers-reduced-motion<c- f>: no-preference) </c-><c- p>{</c->
449+
div.circle {
450+
animation-duration: 1s;
451+
animation-timing-function: linear;
452+
animation-timeline: scroll(element(#container), vertical, "200px", "300px");
453+
}
454+
#left-circle {
455+
animation-name: left-circle;
456+
}
457+
#right-circle {
458+
animation-name: right-circle;
459+
}
460+
#union-circle {
461+
animation-name: union-circle;
462+
animation-timeline: scroll(element(#container), vertical, "250px", "300px");
463+
}
464+
@keyframes left-circle {
465+
to { transform: translate(300px) }
466+
}
467+
@keyframes right-circle {
468+
to { transform: translate(350px) }
469+
}
470+
@keyframes union-circle {
471+
to { opacity: 1 }
472+
}
473+
}
472474
</pre>
473475
<p>Using the programming interface, we might write this as:</p>
474-
<pre class="lang-javascript highlight"><c- a>var</c-> circleTimeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
475-
scrollSource<c- o>:</c-> scrollableElement<c- p>,</c->
476-
scrollOffset<c- o>:</c-> <c- t>'200px'</c-><c- p>,</c->
477-
endScrollOffset<c- o>:</c-> <c- t>'300px'</c->
478-
<c- p>});</c->
476+
<pre class="lang-javascript highlight"><c- k>if</c-> <c- p>(</c->window<c- p>.</c->matchMedia<c- p>(</c-><c- t>'(prefers-reduced-motion: no-preference)'</c-><c- p>).</c->matches<c- p>)</c-> <c- p>{</c->
477+
<c- a>var</c-> circleTimeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
478+
scrollSource<c- o>:</c-> scrollableElement<c- p>,</c->
479+
scrollOffset<c- o>:</c-> <c- t>'200px'</c-><c- p>,</c->
480+
endScrollOffset<c- o>:</c-> <c- t>'300px'</c->
481+
<c- p>});</c->
479482

480-
<c- a>var</c-> left <c- o>=</c-> leftCircle<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'translate(300px)'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
481-
left<c- p>.</c->timeline <c- o>=</c-> circleTimeline<c- p>;</c->
483+
<c- a>var</c-> left <c- o>=</c-> leftCircle<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'translate(300px)'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
484+
left<c- p>.</c->timeline <c- o>=</c-> circleTimeline<c- p>;</c->
482485

483-
<c- a>var</c-> right <c- o>=</c-> leftCircle<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'translate(350px)'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
484-
right<c- p>.</c->timeline <c- o>=</c-> circleTimeline<c- p>;</c->
486+
<c- a>var</c-> right <c- o>=</c-> leftCircle<c- p>.</c->animate<c- p>({</c-> transform<c- o>:</c-> <c- t>'translate(350px)'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
487+
right<c- p>.</c->timeline <c- o>=</c-> circleTimeline<c- p>;</c->
485488

486-
<c- a>var</c-> union <c- o>=</c-> unionCircle<c- p>.</c->animate<c- p>({</c-> opacity<c- o>:</c-> <c- mi>1</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
487-
union<c- p>.</c->timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
488-
scrollSource<c- o>:</c-> scrollableElement<c- p>,</c->
489-
startScrollOffset<c- o>:</c-> <c- t>'250px'</c-><c- p>,</c->
490-
endScrollOffset<c- o>:</c-> <c- t>'300px'</c->
491-
<c- p>});</c->
489+
<c- a>var</c-> union <c- o>=</c-> unionCircle<c- p>.</c->animate<c- p>({</c-> opacity<c- o>:</c-> <c- mi>1</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
490+
union<c- p>.</c->timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
491+
scrollSource<c- o>:</c-> scrollableElement<c- p>,</c->
492+
startScrollOffset<c- o>:</c-> <c- t>'250px'</c-><c- p>,</c->
493+
endScrollOffset<c- o>:</c-> <c- t>'300px'</c->
494+
<c- p>});</c->
495+
<c- p>}</c->
492496
</pre>
493497
<h4 class="heading settled" data-level="2.3.2" id="content-progress-bar-usecase"><span class="secno">2.3.2. </span><span class="content">The content progress bar</span><a class="self-link" href="#content-progress-bar-usecase"></a></h4>
494498
<p>Another common example of an animation that tracks scroll position is a
@@ -504,22 +508,26 @@ <h4 class="heading settled" data-level="2.3.2" id="content-progress-bar-usecase"
504508
reasons.</p>
505509
<p>Using the <a class="property" data-link-type="propdesc" href="#propdef-animation-timeline" id="ref-for-propdef-animation-timeline">animation-timeline</a> property, this example could be written
506510
as follows:</p>
507-
<pre class="lang-css highlight"><c- n>@keyframes</c-> progress <c- p>{</c->
508-
<c- f>to </c-><c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- m>100</c-><c- l>%</c-><c- p>;</c-> <c- p>}</c->
509-
<c- p>}</c->
510-
<c- f>#progress </c-><c- p>{</c->
511-
<c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- l>px</c-><c- p>;</c->
512-
<c- k>height</c-><c- p>:</c-> <c- m>30</c-><c- l>px</c-><c- p>;</c->
513-
<c- k>background</c-><c- p>:</c-> red<c- p>;</c->
514-
<c- k>animation</c-><c- p>:</c-> progress <c- m>1</c-><c- l>s</c-> linear<c- p>;</c->
515-
<c- k>animation-timeline</c-><c- p>:</c-> <c- nf>scroll</c-><c- p>(</c-><c- nf>element</c-><c- p>(</c->#body<c- p>));</c->
516-
<c- p>}</c->
511+
<pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->prefers-reduced-motion<c- f>: no-preference) </c-><c- p>{</c->
512+
<c- n>@keyframes</c-> progress <c- p>{</c->
513+
<c- f>to </c-><c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- m>100</c-><c- l>%</c-><c- p>;</c-> <c- p>}</c->
514+
<c- p>}</c->
515+
#progress {
516+
width: 0px;
517+
height: 30px;
518+
background: red;
519+
animation: progress 1s linear;
520+
animation-timeline: scroll(element(#body));
521+
}
522+
}
517523
</pre>
518524
<p>If we use this API for this case, the example code will be as follow:</p>
519-
<pre class="lang-javascript highlight"><c- a>var</c-> animation <c- o>=</c-> div<c- p>.</c->animate<c- p>({</c-> width<c- o>:</c-> <c- t>'100%'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
520-
animation<c- p>.</c->timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>(</c->
521-
<c- p>{</c-> startScrollOffset<c- o>:</c-> <c- t>'0px'</c-> <c- p>}</c->
522-
<c- p>);</c->
525+
<pre class="lang-javascript highlight"><c- k>if</c-> <c- p>(</c->window<c- p>.</c->matchMedia<c- p>(</c-><c- t>'(prefers-reduced-motion: no-preference)'</c-><c- p>).</c->matches<c- p>)</c-> <c- p>{</c->
526+
<c- a>var</c-> animation <c- o>=</c-> div<c- p>.</c->animate<c- p>({</c-> width<c- o>:</c-> <c- t>'100%'</c-> <c- p>},</c-> <c- mi>1000</c-><c- p>);</c->
527+
animation<c- p>.</c->timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>(</c->
528+
<c- p>{</c-> startScrollOffset<c- o>:</c-> <c- t>'0px'</c-> <c- p>}</c->
529+
<c- p>);</c->
530+
<c- p>}</c->
523531
</pre>
524532
<h3 class="heading settled" data-level="2.4" id="combination-scroll-and-time-base-animations-usecase"><span class="secno">2.4. </span><span class="content">Combination scroll and time-base animations</span><a class="self-link" href="#combination-scroll-and-time-base-animations-usecase"></a></h3>
525533
<h4 class="heading settled" data-level="2.4.1" id="movie-show-case-usecase"><span class="secno">2.4.1. </span><span class="content">Photo viewer</span><a class="self-link" href="#movie-show-case-usecase"></a></h4>
@@ -806,8 +814,8 @@ <h3 class="heading settled" data-level="3.2" id="animation-timeline"><span class
806814
</dl>
807815
</div>
808816
<h3 class="heading settled" data-level="3.3" id="timeline-examples"><span class="secno">3.3. </span><span class="content">Examples</span><a class="self-link" href="#timeline-examples"></a></h3>
809-
<div class="example" id="example-7019e007">
810-
<a class="self-link" href="#example-7019e007"></a> Draw a reading progress bar along the top of the page as the user scrolls
817+
<div class="example" id="example-c47e1df6">
818+
<a class="self-link" href="#example-c47e1df6"></a> Draw a reading progress bar along the top of the page as the user scrolls
811819
<pre class="lang-css highlight"><c- f>#progress </c-><c- p>{</c->
812820
<c- k>position</c-><c- p>:</c-> fixed<c- p>;</c->
813821
<c- k>top</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
@@ -816,50 +824,54 @@ <h3 class="heading settled" data-level="3.3" id="timeline-examples"><span class=
816824
<c- k>background-color</c-><c- p>:</c-> red<c- p>;</c->
817825
<c- p>}</c->
818826
</pre>
819-
<pre class="lang-javascript highlight"><c- a>let</c-> progress <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- u>"progress"</c-><c- p>);</c->
820-
<c- a>let</c-> effect <c- o>=</c-> <c- k>new</c-> KeyframeEffect<c- p>(</c->
821-
progress<c- p>,</c->
822-
<c- p>[</c->
823-
<c- p>{</c-> width<c- o>:</c-> <c- u>"0vw"</c-> <c- p>},</c->
824-
<c- p>{</c-> width<c- o>:</c-> <c- u>"100vw"</c-> <c- p>}</c->
825-
<c- p>],</c->
826-
<c- p>{</c->
827-
duration<c- o>:</c-> <c- mi>1000</c-><c- p>,</c->
828-
easing<c- o>:</c-> <c- u>"linear"</c->
827+
<pre class="lang-javascript highlight"><c- k>if</c-> <c- p>(</c->window<c- p>.</c->matchMedia<c- p>(</c-><c- t>'(prefers-reduced-motion: no-preference)'</c-><c- p>).</c->matches<c- p>)</c-> <c- p>{</c->
828+
<c- a>let</c-> progress <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- u>"progress"</c-><c- p>);</c->
829+
<c- a>let</c-> effect <c- o>=</c-> <c- k>new</c-> KeyframeEffect<c- p>(</c->
830+
progress<c- p>,</c->
831+
<c- p>[</c->
832+
<c- p>{</c-> width<c- o>:</c-> <c- u>"0vw"</c-> <c- p>},</c->
833+
<c- p>{</c-> width<c- o>:</c-> <c- u>"100vw"</c-> <c- p>}</c->
834+
<c- p>],</c->
835+
<c- p>{</c->
836+
duration<c- o>:</c-> <c- mi>1000</c-><c- p>,</c->
837+
easing<c- o>:</c-> <c- u>"linear"</c->
838+
<c- p>});</c->
839+
<c- a>let</c-> timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
840+
trigger<c- o>:</c-> <c- k>new</c-> ScrollTrigger<c- p>({</c->
841+
scrollSource<c- o>:</c-> document<c- p>.</c->documentElement<c- p>,</c->
842+
orientation<c- o>:</c-> <c- u>"vertical"</c-><c- p>,</c->
843+
kind<c- o>:</c-> <c- u>"range"</c->
844+
<c- p>});</c->
829845
<c- p>});</c->
830-
<c- a>let</c-> timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
831-
trigger<c- o>:</c-> <c- k>new</c-> ScrollTrigger<c- p>({</c->
832-
scrollSource<c- o>:</c-> document<c- p>.</c->documentElement<c- p>,</c->
833-
orientation<c- o>:</c-> <c- u>"vertical"</c-><c- p>,</c->
834-
kind<c- o>:</c-> <c- u>"range"</c->
835-
<c- p>})</c->
836-
<c- p>});</c->
837-
<c- a>let</c-> animation <c- o>=</c-> <c- k>new</c-> Animation<c- p>(</c->effect<c- p>,</c-> timeline<c- p>);</c->
838-
animation<c- p>.</c->play<c- p>();</c->
846+
<c- a>let</c-> animation <c- o>=</c-> <c- k>new</c-> Animation<c- p>(</c->effect<c- p>,</c-> timeline<c- p>);</c->
847+
animation<c- p>.</c->play<c- p>();</c->
848+
<c- p>}</c->
839849
</pre>
840850
</div>
841-
<div class="example" id="example-2d6df948">
842-
<a class="self-link" href="#example-2d6df948"></a> The same thing with CSS, using <a class="property" data-link-type="propdesc" href="#propdef-animation-timeline" id="ref-for-propdef-animation-timeline④">animation-timeline</a>
843-
<pre class="lang-css highlight"><c- n>@keyframes</c-> progress <c- p>{</c->
844-
<c- f>from </c-><c- p>{</c->
845-
<c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- l>vw</c-><c- p>;</c->
846-
<c- p>}</c->
847-
<c- f>to </c-><c- p>{</c->
848-
<c- k>width</c-><c- p>:</c-> <c- m>100</c-><c- l>vw</c-><c- p>;</c->
851+
<div class="example" id="example-04835dfd">
852+
<a class="self-link" href="#example-04835dfd"></a> The same thing with CSS, using <a class="property" data-link-type="propdesc" href="#propdef-animation-timeline" id="ref-for-propdef-animation-timeline④">animation-timeline</a>
853+
<pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->prefers-reduced-motion<c- f>: no-preference) </c-><c- p>{</c->
854+
<c- n>@keyframes</c-> progress <c- p>{</c->
855+
<c- f>from </c-><c- p>{</c->
856+
<c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- l>vw</c-><c- p>;</c->
857+
<c- p>}</c->
858+
<c- f>to </c-><c- p>{</c->
859+
<c- k>width</c-><c- p>:</c-> <c- m>100</c-><c- l>vw</c-><c- p>;</c->
860+
<c- p>}</c->
849861
<c- p>}</c->
850-
<c- p>}</c->
851-
<c- f>#progress </c-><c- p>{</c->
852-
<c- k>position</c-><c- p>:</c-> fixed<c- p>;</c->
853-
<c- k>top</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
854-
<c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
855-
<c- k>height</c-><c- p>:</c-> <c- m>2</c-><c- l>px</c-><c- p>;</c->
856-
<c- k>background-color</c-><c- p>:</c-> red<c- p>;</c->
857-
<c- k>animation-name</c-><c- p>:</c-> progress<c- p>;</c->
858-
<c- k>animation-duration</c-><c- p>:</c-> <c- m>1</c-><c- l>s</c-><c- p>;</c->
859-
<c- k>animation-timing-function</c-><c- p>:</c-> linear<c- p>;</c->
860-
<c- c>/* Assume the HTML element has id 'root' */</c->
861-
<c- k>animation-timeline</c-><c- p>:</c-> <c- nf>scroll</c-><c- p>(</c-><c- nf>element</c-><c- p>(</c->#root<c- p>),</c-> vertical<c- p>);</c->
862-
<c- p>}</c->
862+
#progress {
863+
position: fixed;
864+
top: 0;
865+
width: 0;
866+
height: 2px;
867+
background-color: red;
868+
animation-name: progress;
869+
animation-duration: 1s;
870+
animation-timing-function: linear;
871+
/* Assume the HTML element has id 'root' */
872+
animation-timeline: scroll(element(#root), vertical);
873+
}
874+
}
863875
</pre>
864876
</div>
865877
<h2 class="heading settled" data-level="4" id="avoiding-cycles"><span class="secno">4. </span><span class="content">Avoiding cycles with layout</span><a class="self-link" href="#avoiding-cycles"></a></h2>

0 commit comments

Comments
 (0)