WEBVTT

00:00:03.503 --> 00:00:06.640 line:90%
James Craig: Here we have
the prefers-reduced-motion demo

00:00:06.640 --> 00:00:09.743 line:90%
loaded in Safari
on an iOS device.

00:00:09.743 --> 00:00:13.113 line:90%
This is a live view.

00:00:13.113 --> 00:00:16.083 line:90%
On the Mac side, we have
the tethered device

00:00:16.083 --> 00:00:19.052 line:90%
attached in
the Accessibility Inspector.

00:00:19.052 --> 00:00:22.289 line:90%
I have the Settings tab
selected.

00:00:22.289 --> 00:00:24.925 line:90%
And I can do things like
invert the colors

00:00:24.925 --> 00:00:28.528 line:90%
or change the font size
in certain UI.

00:00:28.528 --> 00:00:29.563 line:90%
In this case, we're going to
focus on

00:00:29.563 --> 00:00:31.465 line:90%
the Reduce motion
checkbox.

00:00:31.465 --> 00:00:34.368 line:90%
But before I do, I want to
show you some of the effects.

00:00:34.368 --> 00:00:36.169 line:90%
If you look at Example 1,

00:00:36.169 --> 00:00:38.372 line:90%
there's a scale effect
when you tap it.

00:00:38.372 --> 00:00:42.242 line:90%
I'll go ahead and
reload to clear that one.

00:00:42.242 --> 00:00:46.113 line:90%
There is a spinning background
animation in Example 2.

00:00:46.113 --> 00:00:50.150 line:90%
And there is a preference value
pulled from JavaScript

00:00:50.150 --> 00:00:51.585 line:90%
in Example 3.

00:00:51.585 --> 00:00:54.221 line:90%
You'll see Examples 2 and 3
change immediately

00:00:54.221 --> 00:00:57.557 line:90%
when I click Reduce motion.

00:00:57.557 --> 00:01:00.327 line:90%
So now that Reduce motion value
is on,

00:01:00.327 --> 00:01:04.197 line:90%
the background animation
of Example 2 has stopped.

00:01:04.197 --> 00:01:08.235 line:90%
And if I tap on Example 1,
you'll see that it's changed

00:01:08.235 --> 00:01:11.571 line:90%
to a dissolve effect
instead of a scale effect.

00:01:13.874 --> 00:01:16.810 line:90%
And the value here is that
if you have a device

00:01:16.810 --> 00:01:18.946 line:90%
attached via
Accessibility Inspector,

00:01:18.946 --> 00:01:20.347 line:90%
you don't need to flip
back and forth

00:01:20.347 --> 00:01:24.051 line:90%
between the Settings app on iOS
and your app, or your web app

00:01:24.051 --> 00:01:26.653 line:90%
in this case with this API.

00:01:26.653 --> 00:01:29.856 line:90%
It makes it a lot
less tedious to 

00:01:29.856 --> 00:01:31.591 line:90%
go through and test out
your animations

00:01:31.591 --> 00:01:35.362 line:90%
and test how the variants of
your animations work well

00:01:35.362 --> 00:01:36.129 line:90%
with and without

00:01:36.129 --> 00:01:38.732 line:90%
the prefers-reduced-motion
preference.