Skip to content
This repository has been archived by the owner on May 26, 2020. It is now read-only.

Commit

Permalink
Bikeshed update for 'Use prefers-reduced-motion: no-preference in exa…
Browse files Browse the repository at this point in the history 
…mples (#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 (#45)
  • Loading branch information
@stephenmcgruer
stephenmcgruer committed Mar 25, 2019
1 parent 544a507 commit 060574c
Showing 1 changed file with 108 additions and 96 deletions.
204 changes: 108 additions & 96 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<link href="https://www.w3.org/StyleSheets/TR/2016/W3C-UD" rel="stylesheet" type="text/css">
<meta content="Bikeshed version 8ac92da89bb2253e0da87e20a9b9caa745f5f5b6" name="generator">
<link href="https://wicg.github.io/scroll-animations/" rel="canonical">
<meta content="c1bd9453edbce99b73ef9fa224bf365e24e9ebc0" name="document-revision">
<meta content="544a50729592c840896d6d8164856d311ff4ccf1" name="document-revision">
<link href="web-animations.css" rel="stylesheet" type="text/css">
<style>/* style-md-lists */

Expand Down Expand Up @@ -445,50 +445,54 @@ <h4 class="heading settled" data-level="2.3.1" id="scrollable-animation-usecase"
<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>
</figure>
<p>Using the CSS markup:</p>
<pre class="lang-css highlight"><c- f>div.circle </c-><c- p>{</c->
<c- k>animation-duration</c-><c- p>:</c-> <c- m>1</c-><c- l>s</c-><c- p>;</c->
<c- k>animation-timing-function</c-><c- p>:</c-> linear<c- p>;</c->
<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->
<c- p>}</c->
<c- f>#left-circle </c-><c- p>{</c->
<c- k>animation-name</c-><c- p>:</c-> left-circle<c- p>;</c->
<c- p>}</c->
<c- f>#right-circle </c-><c- p>{</c->
<c- k>animation-name</c-><c- p>:</c-> right-circle<c- p>;</c->
<c- p>}</c->
<c- f>#union-circle </c-><c- p>{</c->
<c- k>animation-name</c-><c- p>:</c-> union-circle<c- p>;</c->
<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->
<c- p>}</c->
<c- n>@keyframes</c-> left-circle <c- p>{</c->
<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->
<c- p>}</c->
<c- n>@keyframes</c-> right-circle <c- p>{</c->
<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->
<c- p>}</c->
<c- n>@keyframes</c-> union-circle <c- p>{</c->
<c- f>to </c-><c- p>{</c-> <c- k>opacity</c-><c- p>:</c-> <c- m>1</c-> <c- p>}</c->
<c- p>}</c->
<pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->prefers-reduced-motion<c- f>: no-preference) </c-><c- p>{</c->
div.circle {
animation-duration: 1s;
animation-timing-function: linear;
animation-timeline: scroll(element(#container), vertical, "200px", "300px");
}
#left-circle {
animation-name: left-circle;
}
#right-circle {
animation-name: right-circle;
}
#union-circle {
animation-name: union-circle;
animation-timeline: scroll(element(#container), vertical, "250px", "300px");
}
@keyframes left-circle {
to { transform: translate(300px) }
}
@keyframes right-circle {
to { transform: translate(350px) }
}
@keyframes union-circle {
to { opacity: 1 }
}
}
</pre>
<p>Using the programming interface, we might write this as:</p>
<pre class="lang-javascript highlight"><c- a>var</c-> circleTimeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
scrollSource<c- o>:</c-> scrollableElement<c- p>,</c->
scrollOffset<c- o>:</c-> <c- t>'200px'</c-><c- p>,</c->
endScrollOffset<c- o>:</c-> <c- t>'300px'</c->
<c- p>});</c->
<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->
<c- a>var</c-> circleTimeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
scrollSource<c- o>:</c-> scrollableElement<c- p>,</c->
scrollOffset<c- o>:</c-> <c- t>'200px'</c-><c- p>,</c->
endScrollOffset<c- o>:</c-> <c- t>'300px'</c->
<c- p>});</c->

<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->
left<c- p>.</c->timeline <c- o>=</c-> circleTimeline<c- p>;</c->
<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->
left<c- p>.</c->timeline <c- o>=</c-> circleTimeline<c- p>;</c->

<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->
right<c- p>.</c->timeline <c- o>=</c-> circleTimeline<c- p>;</c->
<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->
right<c- p>.</c->timeline <c- o>=</c-> circleTimeline<c- p>;</c->

<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->
union<c- p>.</c->timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
scrollSource<c- o>:</c-> scrollableElement<c- p>,</c->
startScrollOffset<c- o>:</c-> <c- t>'250px'</c-><c- p>,</c->
endScrollOffset<c- o>:</c-> <c- t>'300px'</c->
<c- p>});</c->
<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->
union<c- p>.</c->timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
scrollSource<c- o>:</c-> scrollableElement<c- p>,</c->
startScrollOffset<c- o>:</c-> <c- t>'250px'</c-><c- p>,</c->
endScrollOffset<c- o>:</c-> <c- t>'300px'</c->
<c- p>});</c->
<c- p>}</c->
</pre>
<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>
<p>Another common example of an animation that tracks scroll position is a
Expand All @@ -504,22 +508,26 @@ <h4 class="heading settled" data-level="2.3.2" id="content-progress-bar-usecase"
reasons.</p>
<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
as follows:</p>
<pre class="lang-css highlight"><c- n>@keyframes</c-> progress <c- p>{</c->
<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->
<c- p>}</c->
<c- f>#progress </c-><c- p>{</c->
<c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- l>px</c-><c- p>;</c->
<c- k>height</c-><c- p>:</c-> <c- m>30</c-><c- l>px</c-><c- p>;</c->
<c- k>background</c-><c- p>:</c-> red<c- p>;</c->
<c- k>animation</c-><c- p>:</c-> progress <c- m>1</c-><c- l>s</c-> linear<c- p>;</c->
<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->
<c- p>}</c->
<pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->prefers-reduced-motion<c- f>: no-preference) </c-><c- p>{</c->
<c- n>@keyframes</c-> progress <c- p>{</c->
<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->
<c- p>}</c->
#progress {
width: 0px;
height: 30px;
background: red;
animation: progress 1s linear;
animation-timeline: scroll(element(#body));
}
}
</pre>
<p>If we use this API for this case, the example code will be as follow:</p>
<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->
animation<c- p>.</c->timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>(</c->
<c- p>{</c-> startScrollOffset<c- o>:</c-> <c- t>'0px'</c-> <c- p>}</c->
<c- p>);</c->
<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->
<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->
animation<c- p>.</c->timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>(</c->
<c- p>{</c-> startScrollOffset<c- o>:</c-> <c- t>'0px'</c-> <c- p>}</c->
<c- p>);</c->
<c- p>}</c->
</pre>
<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>
<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>
Expand Down Expand Up @@ -806,8 +814,8 @@ <h3 class="heading settled" data-level="3.2" id="animation-timeline"><span class
</dl>
</div>
<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>
<div class="example" id="example-7019e007">
<a class="self-link" href="#example-7019e007"></a> Draw a reading progress bar along the top of the page as the user scrolls
<div class="example" id="example-c47e1df6">
<a class="self-link" href="#example-c47e1df6"></a> Draw a reading progress bar along the top of the page as the user scrolls
<pre class="lang-css highlight"><c- f>#progress </c-><c- p>{</c->
<c- k>position</c-><c- p>:</c-> fixed<c- p>;</c->
<c- k>top</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
Expand All @@ -816,50 +824,54 @@ <h3 class="heading settled" data-level="3.3" id="timeline-examples"><span class=
<c- k>background-color</c-><c- p>:</c-> red<c- p>;</c->
<c- p>}</c->
</pre>
<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->
<c- a>let</c-> effect <c- o>=</c-> <c- k>new</c-> KeyframeEffect<c- p>(</c->
progress<c- p>,</c->
<c- p>[</c->
<c- p>{</c-> width<c- o>:</c-> <c- u>"0vw"</c-> <c- p>},</c->
<c- p>{</c-> width<c- o>:</c-> <c- u>"100vw"</c-> <c- p>}</c->
<c- p>],</c->
<c- p>{</c->
duration<c- o>:</c-> <c- mi>1000</c-><c- p>,</c->
easing<c- o>:</c-> <c- u>"linear"</c->
<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->
<c- a>let</c-> progress <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- u>"progress"</c-><c- p>);</c->
<c- a>let</c-> effect <c- o>=</c-> <c- k>new</c-> KeyframeEffect<c- p>(</c->
progress<c- p>,</c->
<c- p>[</c->
<c- p>{</c-> width<c- o>:</c-> <c- u>"0vw"</c-> <c- p>},</c->
<c- p>{</c-> width<c- o>:</c-> <c- u>"100vw"</c-> <c- p>}</c->
<c- p>],</c->
<c- p>{</c->
duration<c- o>:</c-> <c- mi>1000</c-><c- p>,</c->
easing<c- o>:</c-> <c- u>"linear"</c->
<c- p>});</c->
<c- a>let</c-> timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
trigger<c- o>:</c-> <c- k>new</c-> ScrollTrigger<c- p>({</c->
scrollSource<c- o>:</c-> document<c- p>.</c->documentElement<c- p>,</c->
orientation<c- o>:</c-> <c- u>"vertical"</c-><c- p>,</c->
kind<c- o>:</c-> <c- u>"range"</c->
<c- p>});</c->
<c- p>});</c->
<c- a>let</c-> timeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
trigger<c- o>:</c-> <c- k>new</c-> ScrollTrigger<c- p>({</c->
scrollSource<c- o>:</c-> document<c- p>.</c->documentElement<c- p>,</c->
orientation<c- o>:</c-> <c- u>"vertical"</c-><c- p>,</c->
kind<c- o>:</c-> <c- u>"range"</c->
<c- p>})</c->
<c- p>});</c->
<c- a>let</c-> animation <c- o>=</c-> <c- k>new</c-> Animation<c- p>(</c->effect<c- p>,</c-> timeline<c- p>);</c->
animation<c- p>.</c->play<c- p>();</c->
<c- a>let</c-> animation <c- o>=</c-> <c- k>new</c-> Animation<c- p>(</c->effect<c- p>,</c-> timeline<c- p>);</c->
animation<c- p>.</c->play<c- p>();</c->
<c- p>}</c->
</pre>
</div>
<div class="example" id="example-2d6df948">
<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>
<pre class="lang-css highlight"><c- n>@keyframes</c-> progress <c- p>{</c->
<c- f>from </c-><c- p>{</c->
<c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- l>vw</c-><c- p>;</c->
<c- p>}</c->
<c- f>to </c-><c- p>{</c->
<c- k>width</c-><c- p>:</c-> <c- m>100</c-><c- l>vw</c-><c- p>;</c->
<div class="example" id="example-04835dfd">
<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>
<pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->prefers-reduced-motion<c- f>: no-preference) </c-><c- p>{</c->
<c- n>@keyframes</c-> progress <c- p>{</c->
<c- f>from </c-><c- p>{</c->
<c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- l>vw</c-><c- p>;</c->
<c- p>}</c->
<c- f>to </c-><c- p>{</c->
<c- k>width</c-><c- p>:</c-> <c- m>100</c-><c- l>vw</c-><c- p>;</c->
<c- p>}</c->
<c- p>}</c->
<c- p>}</c->
<c- f>#progress </c-><c- p>{</c->
<c- k>position</c-><c- p>:</c-> fixed<c- p>;</c->
<c- k>top</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
<c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
<c- k>height</c-><c- p>:</c-> <c- m>2</c-><c- l>px</c-><c- p>;</c->
<c- k>background-color</c-><c- p>:</c-> red<c- p>;</c->
<c- k>animation-name</c-><c- p>:</c-> progress<c- p>;</c->
<c- k>animation-duration</c-><c- p>:</c-> <c- m>1</c-><c- l>s</c-><c- p>;</c->
<c- k>animation-timing-function</c-><c- p>:</c-> linear<c- p>;</c->
<c- c>/* Assume the HTML element has id 'root' */</c->
<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->
<c- p>}</c->
#progress {
position: fixed;
top: 0;
width: 0;
height: 2px;
background-color: red;
animation-name: progress;
animation-duration: 1s;
animation-timing-function: linear;
/* Assume the HTML element has id 'root' */
animation-timeline: scroll(element(#root), vertical);
}
}
</pre>
</div>
<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>
Expand Down

0 comments on commit 060574c

Please sign in to comment.