WEBVTT

1
00:00:03.025 --> 00:00:04.925
<00:00:03.025>So <00:00:03.724>welcome, <00:00:04.425>Berlin.

2
00:00:06.705 --> 00:00:08.005
<00:00:06.705>My <00:00:06.997>name <00:00:07.290>is <00:00:07.582>Sasha <00:00:07.875>Lehman.

3
00:00:08.365 --> 00:00:12.445
<00:00:08.365>I <00:00:08.520>am <00:00:08.676>a <00:00:08.831>FinTech <00:00:08.987>or <00:00:09.142>a <00:00:09.298>consultant <00:00:09.453>at <00:00:09.609>FinTech <00:00:09.765>Kru,

4
00:00:12.985 --> 00:00:15.205
<00:00:12.985>and <00:00:13.160>I <00:00:13.334>am <00:00:13.510>very <00:00:13.684>happy <00:00:13.860>to <00:00:14.035>be <00:00:14.209>here <00:00:14.385>today

5
00:00:15.205 --> 00:00:19.565
<00:00:15.205>and <00:00:15.345>to <00:00:15.485>speaking <00:00:15.625>to <00:00:15.765>you <00:00:15.905>about, <00:00:16.045>uh, <00:00:16.184>a <00:00:16.325>passionate, <00:00:16.465>uh, <00:00:16.605>topic

6
00:00:19.865 --> 00:00:24.685
<00:00:19.865>of <00:00:20.005>mine, <00:00:20.145>uh, <00:00:20.284>view <00:00:20.424>transitions <00:00:20.564>and <00:00:20.705>how <00:00:20.845>they <00:00:20.985>affect <00:00:21.125>the <00:00:21.264>hybrid

7
00:00:25.105 --> 00:00:29.565
<00:00:25.105>or <00:00:25.338>cross <00:00:25.571>platform <00:00:25.805>development <00:00:26.038>for <00:00:26.271>US <00:00:26.505>developers.

8
00:00:29.745 --> 00:00:31.845
<00:00:29.745>And <00:00:30.025>also <00:00:30.305>in <00:00:30.585>the <00:00:30.865>design <00:00:31.145>context.

9
00:00:32.865 --> 00:00:35.005
<00:00:32.865>Um, <00:00:33.215>I'm <00:00:33.565>a <00:00:33.915>angular <00:00:34.265>professional.

10
00:00:35.405 --> 00:00:38.765
<00:00:35.405>I <00:00:35.545>also <00:00:35.685>have <00:00:35.825>a <00:00:35.965>huge <00:00:36.105>passion <00:00:36.245>for <00:00:36.385>UI <00:00:36.525>and <00:00:36.665>your <00:00:36.805>X.

11
00:00:39.145 --> 00:00:41.885
<00:00:39.145>So <00:00:39.320>that's <00:00:39.495>why <00:00:39.670>I'm <00:00:39.845>talking <00:00:40.020>to <00:00:40.195>you <00:00:40.370>about <00:00:40.545>view

12
00:00:42.595 --> 00:00:43.765
<00:00:42.595>transitions <00:00:43.648>today.

13
00:00:45.785 --> 00:00:47.245
<00:00:45.785>So <00:00:47.099>firstly,

14
00:00:47.585 --> 00:00:51.885
<00:00:47.585>before <00:00:47.725>we <00:00:47.865>dive <00:00:48.005>into <00:00:48.145>the <00:00:48.285>topic, <00:00:48.425>I <00:00:48.565>want <00:00:48.705>to <00:00:48.845>clarify <00:00:48.985>the,

15
00:00:52.395 --> 00:00:55.405
<00:00:52.395>yeah, <00:00:52.595>the, <00:00:52.795>the, <00:00:52.995>the <00:00:53.195>term <00:00:53.395>of <00:00:53.595>X <00:00:53.795>platform

16
00:00:56.585 --> 00:00:58.965
<00:00:56.585>or <00:00:57.051>hybrid, <00:00:57.518>um, <00:00:57.985>development.

17
00:00:59.505 --> 00:01:03.565
<00:00:59.505>So <00:00:59.660>we <00:00:59.816>have, <00:00:59.971>typically, <00:01:00.127>we <00:01:00.282>have <00:01:00.438>the, <00:01:00.593>uh, <00:01:00.749>the <00:01:00.905>area

18
00:01:03.625 --> 00:01:04.925
<00:01:03.625>of <00:01:04.209>native <00:01:04.795>development.

19
00:01:05.065 --> 00:01:07.965
<00:01:05.065>That's <00:01:05.345>the <00:01:05.625>development <00:01:05.905>where <00:01:06.185>you <00:01:06.465>develop

20
00:01:08.025 --> 00:01:12.725
<00:01:08.025>for <00:01:08.225>specific <00:01:08.425>platform <00:01:08.625>as <00:01:08.825>Android, <00:01:09.025>iOS, <00:01:09.225>windows <00:01:09.425>platform.

21
00:01:13.025 --> 00:01:16.045
<00:01:13.025>So <00:01:13.200>you <00:01:13.375>have <00:01:13.550>your <00:01:13.725>native <00:01:13.900>tools, <00:01:14.075>your <00:01:14.250>native <00:01:14.425>SDKs,

22
00:01:16.275 --> 00:01:18.365
<00:01:16.275>your <00:01:16.741>native <00:01:17.208>development <00:01:17.675>environment,

23
00:01:18.785 --> 00:01:21.845
<00:01:18.785>and <00:01:18.925>so <00:01:19.065>on <00:01:19.205>the <00:01:19.345>other <00:01:19.485>hand <00:01:19.625>there <00:01:19.765>is <00:01:19.905>the <00:01:20.045>web <00:01:20.185>space,

24
00:01:22.225 --> 00:01:26.045
<00:01:22.225>the <00:01:22.380>web <00:01:22.536>development <00:01:22.691>space <00:01:22.847>where <00:01:23.002>we, <00:01:23.158>I <00:01:23.313>think <00:01:23.469>the <00:01:23.625>most

25
00:01:26.045 --> 00:01:28.325
<00:01:26.045>of <00:01:26.278>us <00:01:26.511>feel <00:01:26.745>com <00:01:26.978>most <00:01:27.211>comfortable <00:01:27.445>in.

26
00:01:28.745 --> 00:01:32.765
<00:01:28.745>So <00:01:28.885>we <00:01:29.025>have <00:01:29.165>our <00:01:29.305>frameworks, <00:01:29.445>angular <00:01:29.585>reacts <00:01:29.725>well <00:01:29.865>and <00:01:30.005>so <00:01:30.145>on,

27
00:01:33.105 --> 00:01:35.165
<00:01:33.104>or <00:01:33.384>we <00:01:33.664>develop <00:01:33.945>with <00:01:34.225>Plain <00:01:34.505>Manila.

28
00:01:35.665 --> 00:01:38.925
<00:01:35.664>And <00:01:35.898>there's <00:01:36.131>also <00:01:36.365>the <00:01:36.598>space <00:01:36.831>between <00:01:37.065>the,

29
00:01:39.185 --> 00:01:41.925
<00:01:39.185>that's <00:01:39.418>the <00:01:39.651>cross <00:01:39.885>platform <00:01:40.118>or <00:01:40.351>hybrid <00:01:40.585>part.

30
00:01:42.425 --> 00:01:46.805
<00:01:42.425>So <00:01:42.600>we <00:01:42.774>have <00:01:42.950>some <00:01:43.125>tools <00:01:43.300>like <00:01:43.475>Capacitor <00:01:43.649>or <00:01:43.825>Electron

31
00:01:47.025 --> 00:01:51.645
<00:01:47.025>or <00:01:47.180>even <00:01:47.336>the <00:01:47.491>PWA, <00:01:47.647>um, <00:01:47.802>spec <00:01:47.958>that, <00:01:48.113>uh, <00:01:48.269>that's, <00:01:48.425>um,

32
00:01:52.795 --> 00:01:57.245
<00:01:52.795>that <00:01:52.950>helps <00:01:53.106>us <00:01:53.261>to <00:01:53.417>develop <00:01:53.572>a <00:01:53.728>web <00:01:53.883>web <00:01:54.039>application <00:01:54.195>basis

33
00:01:57.865 --> 00:02:01.645
<00:01:57.865>and <00:01:58.020>ship <00:01:58.176>it <00:01:58.331>to <00:01:58.487>the <00:01:58.642>different <00:01:58.798>platform <00:01:58.953>native <00:01:59.109>platforms <00:01:59.265>like

34
00:02:01.995 --> 00:02:03.725
<00:02:01.995>Android, <00:02:02.345>iOS, <00:02:02.695>and <00:02:03.045>so <00:02:03.395>on,

35
00:02:04.025 --> 00:02:06.885
<00:02:04.025>and <00:02:04.305>even <00:02:04.585>use <00:02:04.865>Native <00:02:05.145>Cap <00:02:05.425>capabilities.

36
00:02:07.385 --> 00:02:09.725
<00:02:07.385>And <00:02:07.585>the <00:02:07.785>benefit <00:02:07.985>of <00:02:08.185>that <00:02:08.384>is <00:02:08.585>that <00:02:08.785>you

37
00:02:10.465 --> 00:02:15.245
<00:02:10.465>as <00:02:10.604>a <00:02:10.745>company <00:02:10.884>only <00:02:11.025>needs <00:02:11.165>to <00:02:11.305>have <00:02:11.445>one <00:02:11.585>developer <00:02:11.725>base, <00:02:11.865>uh,

38
00:02:15.345 --> 00:02:18.485
<00:02:15.345>web <00:02:15.545>developers <00:02:15.745>to <00:02:15.945>ship <00:02:16.145>your <00:02:16.345>product <00:02:16.545>to <00:02:16.745>every,

39
00:02:18.985 --> 00:02:20.845
<00:02:18.985>um, <00:02:20.385>platform.

40
00:02:21.545 --> 00:02:24.045
<00:02:21.545>So <00:02:21.825>after <00:02:22.105>that, <00:02:22.385>what's <00:02:22.665>the <00:02:22.945>problem?

41
00:02:24.315 --> 00:02:28.525
<00:02:24.315>What <00:02:24.470>the <00:02:24.626>view <00:02:24.781>transition <00:02:24.937>API <00:02:25.092>will <00:02:25.248>solve <00:02:25.403>for <00:02:25.559>us, <00:02:25.715>um,

42
00:02:28.785 --> 00:02:32.805
<00:02:28.785>or, <00:02:28.984>um, <00:02:29.185>why <00:02:29.385>it's <00:02:29.585>such <00:02:29.785>a <00:02:29.984>new, <00:02:30.185>um,

43
00:02:32.985 --> 00:02:35.885
<00:02:32.985>and <00:02:33.265>exciting <00:02:33.545>tech <00:02:33.825>for <00:02:34.105>hybrid <00:02:34.385>development.

44
00:02:36.465 --> 00:02:41.085
<00:02:36.465>Um, <00:02:36.592>you <00:02:36.719>may <00:02:36.846>have <00:02:36.974>noticed <00:02:37.101>in <00:02:37.228>the <00:02:37.355>past <00:02:37.483>that <00:02:37.610>the, <00:02:37.737>the <00:02:37.865>web

45
00:02:41.225 --> 00:02:44.085
<00:02:41.225>and <00:02:41.424>the <00:02:41.625>web <00:02:41.825>APIs <00:02:42.025>even <00:02:42.225>got <00:02:42.424>more <00:02:42.625>native.

46
00:02:44.665 --> 00:02:49.045
<00:02:44.665>So <00:02:44.804>some <00:02:44.945>new <00:02:45.084>features <00:02:45.225>came <00:02:45.364>to <00:02:45.505>web <00:02:45.644>APIs, <00:02:45.785>like, <00:02:45.924>for <00:02:46.065>example,

47
00:02:49.265 --> 00:02:52.685
<00:02:49.265>the <00:02:49.440>View <00:02:49.614>or, <00:02:49.790>uh, <00:02:49.964>the <00:02:50.140>five <00:02:50.315>five <00:02:50.489>access <00:02:50.665>API

48
00:02:53.065 --> 00:02:55.845
<00:02:53.065>or <00:02:53.220>even <00:02:53.376>the <00:02:53.531>push <00:02:53.687>API <00:02:53.842>that <00:02:53.998>came <00:02:54.153>to <00:02:54.309>the <00:02:54.465>web.

49
00:02:56.265 --> 00:02:58.845
<00:02:56.265>So, <00:02:56.545>um, <00:02:56.825>the, <00:02:57.105>the <00:02:57.385>large <00:02:57.665>com,

50
00:02:58.985 --> 00:03:02.725
<00:02:58.985>Uh, <00:02:59.185>browser <00:02:59.385>windows <00:02:59.585>tried <00:02:59.785>to <00:02:59.985>narrow <00:03:00.185>the <00:03:00.385>gap

51
00:03:02.725 --> 00:03:04.245
<00:03:02.725>between <00:03:02.998>the <00:03:03.272>native <00:03:03.545>and <00:03:03.819>the <00:03:04.093>web.

52
00:03:04.705 --> 00:03:08.205
<00:03:04.705>And <00:03:04.905>it's <00:03:05.105>also <00:03:05.305>known <00:03:05.505>under <00:03:05.705>the, <00:03:05.905>uh, <00:03:06.105>the,

53
00:03:08.585 --> 00:03:10.565
<00:03:08.585>the <00:03:08.935>name <00:03:09.285>Fugu <00:03:09.635>Project <00:03:09.985>Fugu.

54
00:03:10.695 --> 00:03:13.165
<00:03:10.695>Maybe <00:03:10.870>somebody, <00:03:11.045>if <00:03:11.220>you <00:03:11.394>heard, <00:03:11.570>already <00:03:11.745>heard <00:03:11.920>about <00:03:12.095>it.

55
00:03:13.625 --> 00:03:18.525
<00:03:13.625>Um, <00:03:13.780>there's <00:03:13.936>a <00:03:14.091>nice, <00:03:14.247>um, <00:03:14.402>website, <00:03:14.558>the <00:03:14.713>Fugu <00:03:14.869>API <00:03:15.025>tracker,

56
00:03:18.575 --> 00:03:23.285
<00:03:18.575>where <00:03:18.714>you <00:03:18.855>can <00:03:18.994>keep, <00:03:19.135>uh, <00:03:19.274>up <00:03:19.415>with <00:03:19.554>the <00:03:19.695>latest, <00:03:19.834>um, <00:03:19.975>APIs

57
00:03:23.285 --> 00:03:25.325
<00:03:23.285>that <00:03:23.484>will <00:03:23.685>be <00:03:23.885>shipped <00:03:24.085>in <00:03:24.285>the <00:03:24.484>near <00:03:24.685>future

58
00:03:25.585 --> 00:03:27.445
<00:03:25.585>or <00:03:25.935>in <00:03:26.285>the <00:03:26.635>further <00:03:26.985>future,

59
00:03:27.905 --> 00:03:30.485
<00:03:27.905>and <00:03:28.060>will <00:03:28.216>come <00:03:28.371>to <00:03:28.527>the <00:03:28.682>web <00:03:28.838>to <00:03:28.993>enhance <00:03:29.149>this <00:03:29.305>experience.

60
00:03:30.785 --> 00:03:34.245
<00:03:30.785>So <00:03:30.960>in <00:03:31.135>terms <00:03:31.310>of <00:03:31.484>animation, <00:03:31.660>what <00:03:31.835>is <00:03:32.010>the <00:03:32.185>problem

61
00:03:35.195 --> 00:03:38.525
<00:03:35.195>between <00:03:35.428>the <00:03:35.661>web <00:03:35.894>and <00:03:36.128>the <00:03:36.361>native <00:03:36.595>development?

62
00:03:39.065 --> 00:03:42.045
<00:03:39.065>So <00:03:39.298>when <00:03:39.531>we <00:03:39.765>look <00:03:39.998>about <00:03:40.231>some <00:03:40.465>transitions

63
00:03:42.185 --> 00:03:44.445
<00:03:42.185>or <00:03:42.535>animations <00:03:42.885>that <00:03:43.235>we <00:03:43.585>see

64
00:03:44.505 --> 00:03:48.405
<00:03:44.505>and <00:03:44.680>use <00:03:44.855>in <00:03:45.030>our <00:03:45.204>daily <00:03:45.380>mobile <00:03:45.555>experience, <00:03:45.730>we <00:03:45.905>see

65
00:03:48.405 --> 00:03:50.925
<00:03:48.405>that <00:03:48.638>we <00:03:48.871>have <00:03:49.105>some <00:03:49.338>transitions <00:03:49.571>like <00:03:49.805>this

66
00:03:54.365 --> 00:03:55.945
<00:03:54.365>or <00:03:55.065>like <00:03:55.765>this

67
00:03:59.545 --> 00:04:00.685
<00:03:59.545>or <00:04:00.058>like <00:04:00.571>this.

68
00:04:03.055 --> 00:04:06.315
<00:04:03.055>So <00:04:03.230>what's <00:04:03.405>the <00:04:03.580>problem <00:04:03.755>with <00:04:03.930>this <00:04:04.105>kind <00:04:04.280>of <00:04:04.455>animations?

69
00:04:06.405 --> 00:04:09.755
<00:04:06.405>These <00:04:06.605>kinds <00:04:06.805>of <00:04:07.005>animations <00:04:07.205>are <00:04:07.405>called <00:04:07.605>container <00:04:07.805>transforms,

70
00:04:10.015 --> 00:04:12.395
<00:04:10.015>and <00:04:10.295>they <00:04:10.575>are <00:04:10.855>very <00:04:11.135>difficult <00:04:11.415>to

71
00:04:12.985 --> 00:04:15.795
<00:04:12.985>develop <00:04:13.265>in <00:04:13.545>our <00:04:13.825>web <00:04:14.105>applications <00:04:14.385>because,

72
00:04:15.795 --> 00:04:19.275
<00:04:15.795>because <00:04:15.970>think <00:04:16.144>maybe <00:04:16.320>you <00:04:16.495>think <00:04:16.669>a <00:04:16.844>bit <00:04:17.019>about <00:04:17.195>it

73
00:04:21.135 --> 00:04:24.195
<00:04:21.135>in <00:04:21.310>the <00:04:21.485>web, <00:04:21.659>we <00:04:21.834>are <00:04:22.010>tied <00:04:22.185>to <00:04:22.360>our <00:04:22.534>dome.

74
00:04:24.295 --> 00:04:28.155
<00:04:24.295>So <00:04:24.470>we <00:04:24.645>structure <00:04:24.820>our <00:04:24.995>documents, <00:04:25.170>um, <00:04:25.345>within <00:04:25.520>the <00:04:25.695>dome,

75
00:04:28.335 --> 00:04:31.435
<00:04:28.335>and <00:04:28.534>the <00:04:28.734>dome <00:04:28.935>has <00:04:29.135>a, <00:04:29.335>um, <00:04:29.534>default <00:04:29.734>structure

76
00:04:32.015 --> 00:04:35.795
<00:04:32.015>and <00:04:32.248>what <00:04:32.481>the <00:04:32.715>native <00:04:32.948>developers <00:04:33.181>have, <00:04:33.414>um,

77
00:04:36.735 --> 00:04:39.075
<00:04:36.735>an <00:04:36.910>advantage <00:04:37.085>for, <00:04:37.260>uh, <00:04:37.435>in, <00:04:37.610>in <00:04:37.785>front <00:04:37.960>of <00:04:38.135>us

78
00:04:39.075 --> 00:04:43.395
<00:04:39.075>because <00:04:39.250>they <00:04:39.425>have <00:04:39.599>dedicated <00:04:39.775>APIs <00:04:39.950>to <00:04:40.125>perform <00:04:40.300>such <00:04:40.474>animations.

79
00:04:43.585 --> 00:04:46.595
<00:04:43.585>When <00:04:43.712>you <00:04:43.839>do <00:04:43.966>want <00:04:44.094>to <00:04:44.221>do <00:04:44.348>such <00:04:44.475>an <00:04:44.603>animations <00:04:44.730>in <00:04:44.857>the <00:04:44.984>web,

80
00:04:47.095 --> 00:04:51.155
<00:04:47.095>you <00:04:47.235>need <00:04:47.375>to, <00:04:47.515>um, <00:04:47.655>take <00:04:47.795>the <00:04:47.935>element <00:04:48.075>out <00:04:48.215>of <00:04:48.355>the <00:04:48.495>dome,

81
00:04:51.305 --> 00:04:53.635
<00:04:51.305>then <00:04:51.538>make <00:04:51.771>it <00:04:52.005>large, <00:04:52.238>then <00:04:52.471>you <00:04:52.705>have

82
00:04:53.635 --> 00:04:56.235
<00:04:53.635>to <00:04:53.835>check <00:04:54.034>if <00:04:54.235>it's <00:04:54.435>interfering <00:04:54.635>with <00:04:54.835>other <00:04:55.034>elements,

83
00:04:56.495 --> 00:04:59.595
<00:04:56.495>or <00:04:56.650>it <00:04:56.806>gets <00:04:56.961>even <00:04:57.117>more <00:04:57.272>complicated <00:04:57.428>when <00:04:57.583>you <00:04:57.739>think <00:04:57.895>about

84
00:04:59.785 --> 00:05:01.875
<00:04:59.784>routing <00:05:00.251>during <00:05:00.718>such <00:05:01.184>animations.

85
00:05:02.215 --> 00:05:06.195
<00:05:02.215>It <00:05:02.342>can <00:05:02.469>be <00:05:02.596>quite <00:05:02.724>a <00:05:02.851>pain. <00:05:02.978>Some <00:05:03.105>of <00:05:03.233>you <00:05:03.360>maybe <00:05:03.487>tried <00:05:03.614>it.

86
00:05:06.535 --> 00:05:08.915
<00:05:06.535>So, <00:05:07.001>um, <00:05:07.468>developers, <00:05:07.935>uh,

87
00:05:08.915 --> 00:05:12.395
<00:05:08.915>or <00:05:09.055>yeah, <00:05:09.195>API <00:05:09.335>developers <00:05:09.475>try <00:05:09.615>to <00:05:09.755>solve <00:05:09.895>that <00:05:10.035>problem <00:05:10.175>for <00:05:10.315>us.

88
00:05:12.695 --> 00:05:14.355
<00:05:12.695>And <00:05:12.974>that's <00:05:13.255>with <00:05:13.534>the <00:05:13.815>view <00:05:14.094>transition.

89
00:05:14.515 --> 00:05:18.675
<00:05:14.515>API, <00:05:14.670>the <00:05:14.826>view <00:05:14.981>transition, <00:05:15.137>API, <00:05:15.292>you <00:05:15.448>can <00:05:15.603>see <00:05:15.759>it <00:05:15.914>here,

90
00:05:19.255 --> 00:05:21.075
<00:05:19.255>is <00:05:19.955>currently, <00:05:20.655>um,

91
00:05:21.705 --> 00:05:24.035
<00:05:21.705>supported <00:05:21.938>in <00:05:22.171>all <00:05:22.405>Chrome <00:05:22.638>view <00:05:22.871>based <00:05:23.104>browsers.

92
00:05:24.415 --> 00:05:27.595
<00:05:24.415>And, <00:05:24.695>um, <00:05:24.975>that's, <00:05:25.255>uh, <00:05:25.535>also, <00:05:25.815>I,

93
00:05:27.595 --> 00:05:31.795
<00:05:27.595>that's <00:05:27.735>one <00:05:27.875>thing <00:05:28.015>I'm <00:05:28.155>very <00:05:28.295>happy <00:05:28.435>about <00:05:28.575>with, <00:05:28.715>uh, <00:05:28.855>safari <00:05:28.995>18

94
00:05:31.855 --> 00:05:32.875
<00:05:31.855>or <00:05:32.314>iOS <00:05:32.773>18.

95
00:05:32.875 --> 00:05:36.475
<00:05:32.875>It <00:05:33.050>will <00:05:33.225>be <00:05:33.400>shipped <00:05:33.575>to <00:05:33.750>the <00:05:33.925>current, <00:05:34.100>uh, <00:05:34.275>iOS.

96
00:05:36.615 --> 00:05:40.835
<00:05:36.615>So <00:05:36.755>we <00:05:36.895>also <00:05:37.035>can <00:05:37.175>use <00:05:37.315>view <00:05:37.455>transitions <00:05:37.595>in <00:05:37.735>our <00:05:37.875>iOS <00:05:38.015>environments.

97
00:05:41.385 --> 00:05:46.275
<00:05:41.385>Firefox <00:05:41.512>on <00:05:41.639>the <00:05:41.766>other <00:05:41.894>hand, <00:05:42.021>um, <00:05:42.148>is <00:05:42.275>a <00:05:42.403>ki <00:05:42.530>um, <00:05:42.657>bit, <00:05:42.784>uh,

98
00:05:46.335 --> 00:05:47.675
<00:05:46.335>is <00:05:46.636>bit <00:05:46.938>of <00:05:47.239>a <00:05:47.541>downside

99
00:05:48.115 --> 00:05:51.355
<00:05:48.115>because, <00:05:48.348>um, <00:05:48.581>I <00:05:48.815>don't <00:05:49.048>have <00:05:49.281>any <00:05:49.515>information

100
00:05:51.775 --> 00:05:53.995
<00:05:51.775>how <00:05:51.950>long <00:05:52.125>it <00:05:52.299>will <00:05:52.474>take <00:05:52.650>until <00:05:52.825>they <00:05:53.000>ship <00:05:53.174>it.

101
00:05:54.325 --> 00:05:58.845
<00:05:54.325>There <00:05:54.558>is <00:05:54.791>no <00:05:55.025>current <00:05:55.258>timeframe <00:05:55.491>to <00:05:55.724>predict

102
00:05:59.475 --> 00:06:01.525
<00:05:59.475>when <00:05:59.825>the, <00:06:00.175>the <00:06:00.525>view <00:06:00.875>transition.

103
00:06:01.605 --> 00:06:03.725
<00:06:01.605>API <00:06:01.885>will <00:06:02.165>come <00:06:02.445>to <00:06:02.725>Safari <00:06:03.005>browsers,

104
00:06:04.225 --> 00:06:08.565
<00:06:04.225>but <00:06:04.400>we, <00:06:04.575>when <00:06:04.750>you <00:06:04.925>don't <00:06:05.100>have <00:06:05.275>the <00:06:05.450>necess <00:06:05.625>necessity

105
00:06:08.625 --> 00:06:11.445
<00:06:08.625>to <00:06:08.765>use <00:06:08.905>it <00:06:09.045>in <00:06:09.185>Safari <00:06:09.325>browsers, <00:06:09.465>you <00:06:09.605>can <00:06:09.745>already <00:06:09.885>use <00:06:10.025>it.

106
00:06:12.145 --> 00:06:16.085
<00:06:12.145>So <00:06:12.344>what <00:06:12.544>is <00:06:12.745>the <00:06:12.945>magic <00:06:13.145>behind <00:06:13.344>view <00:06:13.544>transitions,

107
00:06:16.145 --> 00:06:20.085
<00:06:16.145>or <00:06:16.344>do <00:06:16.544>we <00:06:16.745>need <00:06:16.945>a <00:06:17.145>lot <00:06:17.344>of <00:06:17.544>JavaScript

108
00:06:20.145 --> 00:06:21.405
<00:06:20.145>to <00:06:20.522>perform <00:06:20.900>view <00:06:21.279>transitions?

109
00:06:21.585 --> 00:06:22.885
<00:06:21.585>The <00:06:21.974>answer <00:06:22.365>is <00:06:22.755>no.

110
00:06:23.555 --> 00:06:27.165
<00:06:23.555>This, <00:06:23.710>this, <00:06:23.866>uh, <00:06:24.021>line <00:06:24.177>of <00:06:24.332>code <00:06:24.488>is <00:06:24.643>the <00:06:24.799>only <00:06:24.955>line

111
00:06:27.165 --> 00:06:29.805
<00:06:27.165>of <00:06:27.365>code <00:06:27.565>we <00:06:27.765>need <00:06:27.965>to <00:06:28.165>trigger <00:06:28.365>view <00:06:28.565>transition

112
00:06:30.305 --> 00:06:31.765
<00:06:30.305>and <00:06:30.633>why <00:06:30.962>we <00:06:31.290>need <00:06:31.619>it.

113
00:06:32.525 --> 00:06:34.205
<00:06:32.525>I <00:06:32.758>will <00:06:32.991>get <00:06:33.224>to <00:06:33.458>that <00:06:33.691>point <00:06:33.924>later,

114
00:06:34.705 --> 00:06:38.965
<00:06:34.705>but <00:06:34.821>let's, <00:06:34.938>uh, <00:06:35.055>first <00:06:35.171>have <00:06:35.288>a <00:06:35.405>look <00:06:35.521>in <00:06:35.638>the, <00:06:35.755>uh, <00:06:35.871>under <00:06:35.988>the <00:06:36.104>hood

115
00:06:39.305 --> 00:06:42.165
<00:06:39.305>how <00:06:39.505>the <00:06:39.705>browser <00:06:39.905>handles <00:06:40.105>view <00:06:40.305>transitions <00:06:40.505>for <00:06:40.705>us,

116
00:06:43.555 --> 00:06:48.245
<00:06:43.555>what <00:06:43.695>the <00:06:43.835>browser <00:06:43.975>does <00:06:44.115>is, <00:06:44.255>uh, <00:06:44.395>the <00:06:44.535>browser <00:06:44.675>takes <00:06:44.815>our, <00:06:44.955>uh,

117
00:06:48.245 --> 00:06:51.165
<00:06:48.245>when <00:06:48.385>we <00:06:48.525>have <00:06:48.665>the <00:06:48.805>scenario <00:06:48.945>that <00:06:49.085>we <00:06:49.225>want <00:06:49.365>to <00:06:49.505>navigate <00:06:49.645>forward

118
00:06:51.225 --> 00:06:54.485
<00:06:51.225>and <00:06:51.380>use <00:06:51.536>view <00:06:51.691>transitions <00:06:51.847>for <00:06:52.002>the <00:06:52.158>navigation, <00:06:52.313>we <00:06:52.469>have <00:06:52.625>a

119
00:06:54.585 --> 00:06:57.725
<00:06:54.585>before <00:06:54.818>state <00:06:55.051>and <00:06:55.284>we <00:06:55.518>click <00:06:55.751>a <00:06:55.984>button

120
00:06:57.865 --> 00:07:02.765
<00:06:57.865>and <00:06:58.020>navigate <00:06:58.176>in <00:06:58.331>the <00:06:58.487>other <00:06:58.642>part <00:06:58.798>of <00:06:58.953>our, <00:06:59.109>um, <00:06:59.265>application.

121
00:07:02.825 --> 00:07:06.125
<00:07:02.825>So <00:07:02.980>the <00:07:03.136>browser <00:07:03.291>takes <00:07:03.447>a <00:07:03.602>screenshot <00:07:03.758>of <00:07:03.913>our <00:07:04.069>old <00:07:04.224>view

122
00:07:06.845 --> 00:07:08.525
<00:07:06.845>performs <00:07:07.195>dom, <00:07:07.545>the <00:07:07.895>dom <00:07:08.245>changes

123
00:07:08.585 --> 00:07:12.805
<00:07:08.585>for <00:07:08.740>navigation <00:07:08.896>in <00:07:09.051>the <00:07:09.207>background <00:07:09.362>during <00:07:09.518>this <00:07:09.673>period <00:07:09.829>of <00:07:09.984>time

124
00:07:13.385 --> 00:07:17.565
<00:07:13.385>for <00:07:13.512>the <00:07:13.639>user, <00:07:13.766>for <00:07:13.894>the <00:07:14.021>end <00:07:14.148>user, <00:07:14.275>the, <00:07:14.403>the, <00:07:14.530>the <00:07:14.657>view <00:07:14.784>freezes

125
00:07:17.785 --> 00:07:21.405
<00:07:17.785>or <00:07:17.925>he's, <00:07:18.065>he <00:07:18.205>or <00:07:18.345>she <00:07:18.485>sees <00:07:18.625>no <00:07:18.765>changes <00:07:18.905>in <00:07:19.045>the <00:07:19.185>view.

126
00:07:21.865 --> 00:07:24.045
<00:07:21.865>And <00:07:22.215>after <00:07:22.565>that, <00:07:22.915>the, <00:07:23.265>um,

127
00:07:24.575 --> 00:07:26.205
<00:07:24.575>after <00:07:24.854>the <00:07:25.135>DON <00:07:25.414>changes <00:07:25.695>are <00:07:25.974>performed,

128
00:07:26.205 --> 00:07:27.605
<00:07:26.205>the <00:07:26.520>browser <00:07:26.835>takes <00:07:27.150>another <00:07:27.465>screenshot,

129
00:07:27.665 --> 00:07:30.325
<00:07:27.665>or <00:07:27.865>in <00:07:28.065>this <00:07:28.265>case <00:07:28.465>it's <00:07:28.665>a <00:07:28.865>live <00:07:29.065>view.

130
00:07:30.485 --> 00:07:31.485
<00:07:30.485>I <00:07:30.665>will <00:07:30.845>come <00:07:31.025>to <00:07:31.205>that <00:07:31.385>later.

131
00:07:32.145 --> 00:07:34.365
<00:07:32.145>And <00:07:32.611>when <00:07:33.078>these, <00:07:33.544>uh,

132
00:07:34.395 --> 00:07:37.005
<00:07:34.395>screenshots <00:07:34.674>are <00:07:34.955>performed, <00:07:35.234>they <00:07:35.515>cross <00:07:35.794>fade.

133
00:07:37.505 --> 00:07:41.045
<00:07:37.505>That's <00:07:37.705>the <00:07:37.905>default <00:07:38.105>behavior <00:07:38.305>of <00:07:38.505>a <00:07:38.705>view <00:07:38.905>transitions.

134
00:07:42.265 --> 00:07:46.005
<00:07:42.265>So <00:07:42.544>let's <00:07:42.825>see, <00:07:43.104>this <00:07:43.385>an <00:07:43.664>action.

135
00:07:47.005 --> 00:07:49.645
<00:07:47.005>I <00:07:47.180>have <00:07:47.355>an, <00:07:47.530>I've <00:07:47.705>brought <00:07:47.880>an <00:07:48.055>example <00:07:48.230>for <00:07:48.405>you.

136
00:07:50.385 --> 00:07:51.925
<00:07:50.385>So, <00:07:51.771>um,

137
00:07:54.145 --> 00:07:55.415
<00:07:54.145>maybe <00:07:54.526>a <00:07:54.907>step <00:07:55.288>back.

138
00:07:55.675 --> 00:07:58.775
<00:07:55.675>Uh, <00:07:55.815>when <00:07:55.955>you, <00:07:56.095>when <00:07:56.235>we <00:07:56.375>have <00:07:56.515>our <00:07:56.655>products, <00:07:56.795>we <00:07:56.935>designed <00:07:57.075>them

139
00:07:59.395 --> 00:08:00.735
<00:07:59.395>to <00:07:59.998>be <00:08:00.601>topnotch

140
00:08:00.795 --> 00:08:04.855
<00:08:00.795>and <00:08:00.935>we <00:08:01.075>want <00:08:01.215>to <00:08:01.355>stand <00:08:01.495>out <00:08:01.635>in <00:08:01.775>front <00:08:01.915>of <00:08:02.055>our <00:08:02.195>competitors.

141
00:08:05.155 --> 00:08:08.575
<00:08:05.155>So <00:08:05.310>I <00:08:05.466>brought <00:08:05.621>you <00:08:05.777>an <00:08:05.932>app, <00:08:06.088>it's <00:08:06.243>an <00:08:06.399>a <00:08:06.554>kind

142
00:08:08.575 --> 00:08:09.615
<00:08:08.575>of <00:08:08.808>fitness <00:08:09.043>app <00:08:09.277>for <00:08:09.511>you.

143
00:08:10.115 --> 00:08:13.815
<00:08:10.115>And, <00:08:10.270>um, <00:08:10.426>I <00:08:10.581>implemented <00:08:10.737>one <00:08:10.892>without <00:08:11.048>vision <00:08:11.203>sessions <00:08:11.359>in <00:08:11.515>the

144
00:08:13.815 --> 00:08:18.255
<00:08:13.815>other <00:08:13.990>one <00:08:14.165>with, <00:08:14.340>and <00:08:14.515>the <00:08:14.690>in <00:08:14.865>kinds <00:08:15.040>of <00:08:15.215>functionality,

145
00:08:18.285 --> 00:08:21.535
<00:08:18.285>they're <00:08:18.440>similar, <00:08:18.596>but, <00:08:18.751>um, <00:08:18.907>when <00:08:19.062>you <00:08:19.218>look <00:08:19.373>at <00:08:19.529>it, <00:08:19.685>okay,

146
00:08:21.695 --> 00:08:24.415
<00:08:21.695>I <00:08:21.928>can <00:08:22.161>navigate <00:08:22.395>the <00:08:22.628>navigation <00:08:22.861>is <00:08:23.094>instant,

147
00:08:24.725 --> 00:08:27.895
<00:08:24.725>it's <00:08:24.958>quite <00:08:25.191>functional, <00:08:25.425>but <00:08:25.658>it's <00:08:25.891>not <00:08:26.125>appealing.

148
00:08:28.805 --> 00:08:32.105
<00:08:28.805>So <00:08:28.932>on <00:08:29.059>the <00:08:29.186>other <00:08:29.314>hand, <00:08:29.441>what <00:08:29.568>can <00:08:29.695>we <00:08:29.823>do <00:08:29.950>with <00:08:30.077>new <00:08:30.205>transitions?

149
00:08:34.055 --> 00:08:36.645
<00:08:34.054>Some <00:08:34.334>ki <00:08:34.614>some <00:08:34.895>kind <00:08:35.174>of, <00:08:35.454>uh,

150
00:08:36.825 --> 00:08:39.405
<00:08:36.825>as <00:08:37.025>some <00:08:37.225>fancy <00:08:37.425>stuff <00:08:37.625>if <00:08:37.825>you <00:08:38.025>ask <00:08:38.225>me.

151
00:08:40.505 --> 00:08:44.925
<00:08:40.505>So <00:08:40.645>it's <00:08:40.784>a, <00:08:40.924>it's <00:08:41.064>a, <00:08:41.205>a <00:08:41.345>totally <00:08:41.485>different <00:08:41.625>kind <00:08:41.765>of <00:08:41.905>animation

152
00:08:45.505 --> 00:08:47.885
<00:08:45.505>and <00:08:45.785>totally <00:08:46.064>different <00:08:46.345>kind <00:08:46.625>of <00:08:46.905>feeling

153
00:08:47.885 --> 00:08:49.445
<00:08:47.885>that <00:08:48.085>you <00:08:48.285>have <00:08:48.485>when <00:08:48.685>you <00:08:48.885>use <00:08:49.085>the <00:08:49.285>product.

154
00:08:49.985 --> 00:08:52.765
<00:08:49.985>So <00:08:50.140>maybe <00:08:50.296>it <00:08:50.451>was <00:08:50.607>a <00:08:50.762>bit, <00:08:50.918>uh, <00:08:51.073>a <00:08:51.229>bit <00:08:51.385>fast.

155
00:08:53.225 --> 00:08:56.325
<00:08:53.225>So <00:08:53.380>I <00:08:53.536>slow <00:08:53.691>down <00:08:53.847>the <00:08:54.002>animation <00:08:54.158>for <00:08:54.313>you <00:08:54.469>that <00:08:54.625>we

156
00:08:57.585 --> 00:09:01.405
<00:08:57.585>can <00:08:57.760>enjoy <00:08:57.935>the <00:08:58.110>animation, <00:08:58.285>uh, <00:08:58.460>in <00:08:58.635>the <00:08:58.810>full <00:08:58.985>spectrum.

157
00:09:02.185 --> 00:09:05.205
<00:09:02.185>So <00:09:02.464>I <00:09:02.744>reduce <00:09:03.025>the <00:09:03.305>animation <00:09:03.584>speed

158
00:09:05.585 --> 00:09:10.485
<00:09:05.585>and <00:09:05.740>you <00:09:05.896>see <00:09:06.051>that, <00:09:06.207>um, <00:09:06.362>that <00:09:06.518>you <00:09:06.673>can, <00:09:06.829>um, <00:09:06.985>achieve,

159
00:09:10.825 --> 00:09:15.725
<00:09:10.825>uh, <00:09:11.058>very, <00:09:11.291>uh, <00:09:11.525>very <00:09:11.758>appealing, <00:09:11.991>uh, <00:09:12.225>animations

160
00:09:15.725 --> 00:09:16.765
<00:09:15.725>with <00:09:16.193>view <00:09:16.661>transitions.

161
00:09:17.145 --> 00:09:21.045
<00:09:17.145>And <00:09:17.378>I <00:09:17.611>say, <00:09:17.845>you <00:09:18.078>only <00:09:18.311>need <00:09:18.545>CSS

162
00:09:21.045 --> 00:09:23.045
<00:09:21.045>to <00:09:21.324>perform <00:09:21.604>this <00:09:21.885>kind <00:09:22.165>of <00:09:22.444>animations.

163
00:09:23.185 --> 00:09:25.805
<00:09:23.185>That's <00:09:23.385>quite <00:09:23.584>awesome. <00:09:23.785>And <00:09:23.984>for <00:09:24.185>us <00:09:24.385>as <00:09:24.584>developers,

164
00:09:25.835 --> 00:09:29.085
<00:09:25.835>it's <00:09:25.990>even <00:09:26.146>easier <00:09:26.301>to <00:09:26.457>use <00:09:26.612>it <00:09:26.768>in <00:09:26.923>our <00:09:27.079>daily <00:09:27.235>products.

165
00:09:30.105 --> 00:09:33.645
<00:09:30.105>So <00:09:30.455>now <00:09:30.805>back <00:09:31.155>to <00:09:31.505>the,

166
00:09:34.185 --> 00:09:35.205
<00:09:34.185>to <00:09:34.491>the <00:09:34.797>current <00:09:35.103>slide.

167
00:09:35.265 --> 00:09:39.085
<00:09:35.265>So <00:09:35.420>that's <00:09:35.576>how <00:09:35.731>view <00:09:35.887>transitions <00:09:36.042>look <00:09:36.198>like <00:09:36.353>in <00:09:36.509>the, <00:09:36.665>uh,

168
00:09:39.145 --> 00:09:40.205
<00:09:39.145>it <00:09:39.335>look <00:09:39.526>like <00:09:39.717>in <00:09:39.908>the <00:09:40.099>browser.

169
00:09:40.425 --> 00:09:43.165
<00:09:40.425>So <00:09:40.658>what's <00:09:40.891>happening <00:09:41.125>for <00:09:41.358>us, <00:09:41.591>the <00:09:41.824>developers,

170
00:09:43.795 --> 00:09:45.485
<00:09:43.795>when <00:09:44.074>we <00:09:44.354>trigger <00:09:44.635>a <00:09:44.915>view <00:09:45.194>transition,

171
00:09:45.585 --> 00:09:50.565
<00:09:45.585>the <00:09:45.725>browser <00:09:45.865>creates <00:09:46.005>a <00:09:46.145>new <00:09:46.285>top <00:09:46.425>layer <00:09:46.565>topmost, <00:09:46.705>um, <00:09:46.845>dome <00:09:46.985>layer,

172
00:09:51.065 --> 00:09:54.725
<00:09:51.065>um, <00:09:51.240>called <00:09:51.415>the <00:09:51.590>view <00:09:51.765>transition <00:09:51.940>layer <00:09:52.115>that <00:09:52.290>is, <00:09:52.465>um,

173
00:09:55.685 --> 00:09:58.605
<00:09:55.685>attached <00:09:55.885>under <00:09:56.084>the <00:09:56.285>root <00:09:56.484>of <00:09:56.685>the <00:09:56.885>HTML <00:09:57.084>document.

174
00:09:58.985 --> 00:10:02.925
<00:09:58.985>And, <00:09:59.185>um, <00:09:59.385>so <00:09:59.585>is <00:09:59.785>above <00:09:59.985>every <00:10:00.185>other <00:10:00.385>element,

175
00:10:03.105 --> 00:10:05.685
<00:10:03.105>so <00:10:03.260>it <00:10:03.416>can't <00:10:03.571>interfere <00:10:03.727>with <00:10:03.882>other <00:10:04.038>layers <00:10:04.193>of <00:10:04.349>our <00:10:04.505>application.

176
00:10:06.385 --> 00:10:08.085
<00:10:06.385>So <00:10:06.735>this <00:10:07.085>kind <00:10:07.435>of <00:10:07.785>structure,

177
00:10:08.475 --> 00:10:10.045
<00:10:08.475>what <00:10:08.708>does <00:10:08.941>the <00:10:09.175>structure <00:10:09.408>do <00:10:09.641>for <00:10:09.875>us?

178
00:10:10.465 --> 00:10:11.605
<00:10:10.465>We <00:10:10.807>have <00:10:11.149>view <00:10:11.491>transition.

179
00:10:11.945 --> 00:10:16.765
<00:10:11.945>The <00:10:12.120>view <00:10:12.295>transition <00:10:12.470>element <00:10:12.645>is <00:10:12.820>the <00:10:12.995>root <00:10:13.170>overlay <00:10:13.345>element

180
00:10:16.945 --> 00:10:18.005
<00:10:16.945>of <00:10:17.263>the <00:10:17.581>view <00:10:17.899>transition.

181
00:10:18.455 --> 00:10:21.885
<00:10:18.455>Underneath <00:10:18.630>there <00:10:18.805>are <00:10:18.980>view <00:10:19.155>is <00:10:19.330>the <00:10:19.505>view <00:10:19.680>transition <00:10:19.855>group.

182
00:10:21.885 --> 00:10:24.685
<00:10:21.885>That's <00:10:22.060>also <00:10:22.235>root <00:10:22.410>element, <00:10:22.585>um, <00:10:22.760>an <00:10:22.935>additional <00:10:23.110>root <00:10:23.285>element.

183
00:10:25.065 --> 00:10:28.405
<00:10:25.065>And <00:10:25.205>so <00:10:25.345>we <00:10:25.485>have <00:10:25.625>the <00:10:25.765>image <00:10:25.905>pair, <00:10:26.045>that's <00:10:26.185>the <00:10:26.325>image <00:10:26.465>pairs

184
00:10:28.405 --> 00:10:30.125
<00:10:28.405>with <00:10:28.685>the <00:10:28.964>screenshots <00:10:29.245>I <00:10:29.525>mentioned <00:10:29.805>earlier.

185
00:10:30.785 --> 00:10:33.925
<00:10:30.785>So <00:10:30.940>you <00:10:31.096>have <00:10:31.251>an <00:10:31.407>old <00:10:31.562>and <00:10:31.718>a <00:10:31.873>new <00:10:32.029>image <00:10:32.185>pair,

186
00:10:34.225 --> 00:10:37.445
<00:10:34.225>and <00:10:34.400>they, <00:10:34.575>um, <00:10:34.750>are <00:10:34.925>also <00:10:35.100>present <00:10:35.275>in <00:10:35.450>a <00:10:35.625>dome.

187
00:10:37.785 --> 00:10:39.365
<00:10:37.785>So, <00:10:38.064>uh, <00:10:38.344>due <00:10:38.625>to <00:10:38.905>the <00:10:39.185>fact

188
00:10:39.365 --> 00:10:41.365
<00:10:39.365>that <00:10:39.645>these <00:10:39.925>elements <00:10:40.205>are <00:10:40.485>dome <00:10:40.765>elements,

189
00:10:41.365 --> 00:10:43.205
<00:10:41.365>we <00:10:41.645>can <00:10:41.925>access <00:10:42.205>them <00:10:42.485>via <00:10:42.765>CSS,

190
00:10:45.745 --> 00:10:47.485
<00:10:45.745>but <00:10:46.025>there's <00:10:46.305>a <00:10:46.585>caveat <00:10:46.865>with <00:10:47.145>that.

191
00:10:47.945 --> 00:10:51.645
<00:10:47.945>So <00:10:48.085>I <00:10:48.225>told <00:10:48.365>you <00:10:48.505>that <00:10:48.645>the <00:10:48.785>old <00:10:48.925>image <00:10:49.065>that <00:10:49.205>is <00:10:49.345>taken

192
00:10:52.345 --> 00:10:53.525
<00:10:52.345>is <00:10:52.699>a <00:10:53.053>real <00:10:53.406>image.

193
00:10:53.635 --> 00:10:57.485
<00:10:53.635>It's <00:10:53.775>not <00:10:53.915>any <00:10:54.055>kind <00:10:54.194>of <00:10:54.335>dumb <00:10:54.475>copy <00:10:54.615>of <00:10:54.755>the <00:10:54.895>original <00:10:55.035>element.

194
00:10:57.665 --> 00:11:01.805
<00:10:57.665>So <00:10:57.792>it's <00:10:57.919>an <00:10:58.046>a <00:10:58.174>snapshot <00:10:58.301>and, <00:10:58.428>uh, <00:10:58.555>also <00:10:58.683>therefore <00:10:58.810>an <00:10:58.937>image <00:10:59.064>data.

195
00:11:02.545 --> 00:11:06.125
<00:11:02.545>So <00:11:02.778>you <00:11:03.011>can't <00:11:03.245>change <00:11:03.478>colors <00:11:03.711>of <00:11:03.944>elements

196
00:11:06.125 --> 00:11:09.525
<00:11:06.125>that <00:11:06.325>are <00:11:06.525>within <00:11:06.725>these, <00:11:06.925>um, <00:11:07.125>view <00:11:07.325>transition <00:11:07.525>images.

197
00:11:10.025 --> 00:11:12.045
<00:11:10.025>So <00:11:10.199>keep <00:11:10.375>that <00:11:10.550>in <00:11:10.725>mind <00:11:10.900>when <00:11:11.074>you <00:11:11.250>use <00:11:11.425>view

198
00:11:12.045 --> 00:11:13.085
<00:11:12.045>transitions <00:11:12.513>with <00:11:12.981>that.

199
00:11:14.505 --> 00:11:18.325
<00:11:14.505>So <00:11:14.680>I <00:11:14.855>already <00:11:15.030>showed <00:11:15.205>you, <00:11:15.380>uh, <00:11:15.555>the <00:11:15.730>demo, <00:11:15.905>um,

200
00:11:18.745 --> 00:11:21.405
<00:11:18.745>of <00:11:18.885>the <00:11:19.025>view <00:11:19.165>transitions <00:11:19.305>and <00:11:19.445>what <00:11:19.585>we <00:11:19.725>can <00:11:19.865>achieve <00:11:20.005>with <00:11:20.145>that.

201
00:11:21.825 --> 00:11:25.485
<00:11:21.825>But <00:11:22.025>I <00:11:22.225>also <00:11:22.425>have, <00:11:22.625>um, <00:11:22.825>to, <00:11:23.025>um, <00:11:23.225>clarify

202
00:11:25.715 --> 00:11:27.765
<00:11:25.715>what <00:11:25.948>I <00:11:26.181>meant <00:11:26.415>earlier <00:11:26.648>with <00:11:26.881>the <00:11:27.115>term.

203
00:11:28.075 --> 00:11:29.085
<00:11:28.075>It's <00:11:28.378>a <00:11:28.681>live <00:11:28.984>view.

204
00:11:29.905 --> 00:11:32.565
<00:11:29.905>Um, <00:11:30.185>so <00:11:30.464>the, <00:11:30.745>the, <00:11:31.025>the <00:11:31.305>old

205
00:11:32.565 --> 00:11:34.565
<00:11:32.565>and <00:11:32.740>the <00:11:32.915>new <00:11:33.090>image <00:11:33.265>we, <00:11:33.440>we <00:11:33.615>have, <00:11:33.790>we <00:11:33.965>saw

206
00:11:34.635 --> 00:11:37.405
<00:11:34.635>that <00:11:34.915>these <00:11:35.194>images <00:11:35.475>are, <00:11:35.755>um, <00:11:36.035>screenshots.

207
00:11:37.465 --> 00:11:40.325
<00:11:37.465>And <00:11:37.620>the <00:11:37.776>second, <00:11:37.931>the <00:11:38.087>new <00:11:38.242>image <00:11:38.398>is <00:11:38.553>a <00:11:38.709>live <00:11:38.865>view.

208
00:11:40.625 --> 00:11:42.645
<00:11:40.625>So <00:11:40.825>in <00:11:41.025>the <00:11:41.225>case <00:11:41.425>that <00:11:41.625>we <00:11:41.825>have <00:11:42.025>here,

209
00:11:42.865 --> 00:11:45.125
<00:11:42.865>we <00:11:43.065>have <00:11:43.265>some <00:11:43.465>video <00:11:43.665>playing, <00:11:43.865>some <00:11:44.065>gif <00:11:44.265>playing,

210
00:11:45.145 --> 00:11:50.005
<00:11:45.145>and <00:11:45.285>we <00:11:45.425>want <00:11:45.564>to <00:11:45.704>perform <00:11:45.845>a <00:11:45.985>view <00:11:46.125>transition <00:11:46.265>if <00:11:46.405>these, <00:11:46.545>uh,

211
00:11:50.005 --> 00:11:52.445
<00:11:50.005>actions <00:11:50.355>are <00:11:50.705>only, <00:11:51.055>um, <00:11:51.405>screenshots.

212
00:11:52.505 --> 00:11:56.365
<00:11:52.505>So <00:11:52.738>when <00:11:52.971>we <00:11:53.205>transition <00:11:53.438>these <00:11:53.671>elements, <00:11:53.905>the

213
00:11:57.415 --> 00:12:00.165
<00:11:57.415>video <00:11:57.694>will <00:11:57.974>freeze <00:11:58.255>and <00:11:58.535>play <00:11:58.814>again.

214
00:12:00.625 --> 00:12:02.785
<00:12:00.625>So <00:12:00.975>let's <00:12:01.325>have <00:12:01.675>a <00:12:02.025>look.

215
00:12:03.445 --> 00:12:07.385
<00:12:03.445>In <00:12:03.678>this <00:12:03.911>case, <00:12:04.145>no <00:12:04.378>freeze, <00:12:04.611>no, <00:12:04.845>um,

216
00:12:08.965 --> 00:12:10.825
<00:12:08.965>no, <00:12:09.665>um, <00:12:10.365>interference.

217
00:12:11.525 --> 00:12:14.305
<00:12:11.525>Uh, <00:12:11.699>the, <00:12:11.875>the <00:12:12.050>internet <00:12:12.225>may <00:12:12.400>be <00:12:12.574>a <00:12:12.750>bit <00:12:12.925>tricky.

218
00:12:14.845 --> 00:12:16.465
<00:12:14.845>So <00:12:15.078>let's <00:12:15.311>have <00:12:15.545>also <00:12:15.778>have <00:12:16.011>a <00:12:16.245>look

219
00:12:16.725 --> 00:12:21.345
<00:12:16.725>and <00:12:16.925>even <00:12:17.125>skip <00:12:17.325>the, <00:12:17.525>um, <00:12:17.725>pause <00:12:17.925>the <00:12:18.125>animation

220
00:12:22.185 --> 00:12:23.955
<00:12:22.185>that <00:12:22.418>we <00:12:22.651>can <00:12:22.885>see <00:12:23.118>that <00:12:23.351>it's <00:12:23.584>playing,

221
00:12:24.225 --> 00:12:26.035
<00:12:24.225>even <00:12:24.505>if <00:12:24.785>we <00:12:25.065>pause <00:12:25.345>the <00:12:25.625>transition.

222
00:12:26.055 --> 00:12:28.755
<00:12:26.055>So <00:12:26.229>when <00:12:26.405>we <00:12:26.579>in <00:12:26.755>the <00:12:26.930>animations <00:12:27.104>panel, <00:12:27.280>we <00:12:27.454>can

223
00:12:29.325 --> 00:12:31.875
<00:12:29.325>debug <00:12:29.525>our <00:12:29.725>animations, <00:12:29.925>we <00:12:30.125>can <00:12:30.325>reduce <00:12:30.525>the <00:12:30.725>speed

224
00:12:32.135 --> 00:12:35.315
<00:12:32.135>or <00:12:32.335>we <00:12:32.535>can <00:12:32.735>even, <00:12:32.935>um, <00:12:33.135>step, <00:12:33.335>uh, <00:12:33.535>uh,

225
00:12:35.505 --> 00:12:38.275
<00:12:35.505>through <00:12:35.785>the <00:12:36.064>animation <00:12:36.345>states <00:12:36.625>very <00:12:36.905>specifically,

226
00:12:38.335 --> 00:12:39.555
<00:12:38.335>we <00:12:38.701>get <00:12:39.067>here <00:12:39.433>timeframe

227
00:12:39.935 --> 00:12:42.955
<00:12:39.935>and <00:12:40.135>then <00:12:40.334>we <00:12:40.535>can <00:12:40.734>skip <00:12:40.935>through <00:12:41.135>our <00:12:41.334>application,

228
00:12:43.535 --> 00:12:45.235
<00:12:43.535>um, <00:12:44.001>as <00:12:44.468>we <00:12:44.935>like.

229
00:12:45.735 --> 00:12:50.595
<00:12:45.735>And <00:12:45.875>you <00:12:46.015>see <00:12:46.155>that <00:12:46.295>the <00:12:46.435>video <00:12:46.575>animation <00:12:46.715>is <00:12:46.855>not <00:12:46.995>interrupted <00:12:47.135>in

230
00:12:50.595 --> 00:12:51.715
<00:12:50.595>the <00:12:50.931>whole <00:12:51.267>animation <00:12:51.603>process.

231
00:12:52.055 --> 00:12:54.955
<00:12:52.055>So <00:12:52.210>that's <00:12:52.366>what <00:12:52.521>I <00:12:52.677>meant <00:12:52.832>with <00:12:52.988>the <00:12:53.143>live <00:12:53.299>view <00:12:53.454>element.

232
00:12:57.535 --> 00:13:01.065
<00:12:57.535>So <00:12:58.001>sorry <00:12:58.468>about <00:12:58.935>that.

233
00:13:02.515 --> 00:13:04.065
<00:13:02.515>Let's <00:13:02.794>have <00:13:03.073>a <00:13:03.352>look. <00:13:03.631>So <00:13:03.910>the,

234
00:13:04.105 --> 00:13:06.665
<00:13:04.105>I <00:13:04.280>said <00:13:04.455>the <00:13:04.630>default <00:13:04.805>animation <00:13:04.980>is <00:13:05.155>a <00:13:05.330>cross <00:13:05.505>fade.

235
00:13:06.765 --> 00:13:08.385
<00:13:06.765>So <00:13:07.045>let's, <00:13:07.324>let's <00:13:07.605>have <00:13:07.885>a <00:13:08.165>look

236
00:13:08.445 --> 00:13:12.185
<00:13:08.445>and <00:13:08.600>test <00:13:08.756>these <00:13:08.911>cross <00:13:09.067>fade <00:13:09.222>effects <00:13:09.378>in <00:13:09.533>our <00:13:09.689>application <00:13:09.845>here.

237
00:13:12.845 --> 00:13:17.345
<00:13:12.845>Uh, <00:13:12.985>for <00:13:13.125>example, <00:13:13.265>when <00:13:13.405>we <00:13:13.545>want <00:13:13.685>to <00:13:13.825>navigate <00:13:13.965>from <00:13:14.105>this, <00:13:14.245>um,

238
00:13:17.495 --> 00:13:19.225
<00:13:17.495>list <00:13:17.775>view <00:13:18.055>to <00:13:18.335>our <00:13:18.615>detail <00:13:18.895>view.

239
00:13:19.645 --> 00:13:23.705
<00:13:19.645>So <00:13:19.800>we <00:13:19.956>will <00:13:20.111>have <00:13:20.267>a <00:13:20.422>look <00:13:20.578>in <00:13:20.733>our, <00:13:20.889>um, <00:13:21.045>application.

240
00:13:23.865 --> 00:13:26.305
<00:13:23.865>I <00:13:24.065>have <00:13:24.265>an <00:13:24.465>example <00:13:24.665>with <00:13:24.865>an <00:13:25.065>Angular <00:13:25.265>application.

241
00:13:26.725 --> 00:13:28.025
<00:13:26.725>Um, <00:13:27.115>that's <00:13:27.505>not <00:13:27.895>meant

242
00:13:28.025 --> 00:13:30.665
<00:13:28.025>that <00:13:28.199>you <00:13:28.375>only <00:13:28.550>can <00:13:28.725>use <00:13:28.900>view <00:13:29.074>transition <00:13:29.250>with <00:13:29.425>angular.

243
00:13:31.085 --> 00:13:32.385
<00:13:31.085>If <00:13:31.377>you're <00:13:31.670>using <00:13:31.962>React <00:13:32.255>view

244
00:13:32.725 --> 00:13:34.345
<00:13:32.725>or <00:13:33.005>another <00:13:33.285>framework <00:13:33.565>of <00:13:33.845>your <00:13:34.125>choice,

245
00:13:34.675 --> 00:13:37.905
<00:13:34.675>there <00:13:34.849>will <00:13:35.025>be <00:13:35.199>an <00:13:35.375>implementation <00:13:35.550>for <00:13:35.724>that <00:13:35.900>or <00:13:36.074>even,

246
00:13:38.285 --> 00:13:42.105
<00:13:38.285>or <00:13:38.412>you <00:13:38.539>can <00:13:38.666>even <00:13:38.794>use <00:13:38.921>the <00:13:39.048>native <00:13:39.175>JavaScript <00:13:39.303>APIs <00:13:39.430>like <00:13:39.557>in, <00:13:39.685>uh,

247
00:13:42.205 --> 00:13:43.865
<00:13:42.205>in <00:13:42.671>my <00:13:43.138>first <00:13:43.605>view.

248
00:13:43.885 --> 00:13:46.985
<00:13:43.885>So <00:13:44.118>with <00:13:44.351>document <00:13:44.585>start <00:13:44.818>view <00:13:45.051>transition, <00:13:45.285>um,

249
00:13:47.405 --> 00:13:48.625
<00:13:47.405>you <00:13:47.679>can <00:13:47.954>start <00:13:48.228>a <00:13:48.503>transition

250
00:13:48.625 --> 00:13:51.705
<00:13:48.625>and <00:13:48.780>in <00:13:48.936>the <00:13:49.091>callback <00:13:49.247>function <00:13:49.402>in <00:13:49.558>the <00:13:49.713>middle <00:13:49.869>you <00:13:50.025>can,

251
00:13:51.805 --> 00:13:53.185
<00:13:51.805>you <00:13:52.115>perform <00:13:52.425>your <00:13:52.736>DOM <00:13:53.046>changes.

252
00:13:53.405 --> 00:13:55.785
<00:13:53.405>And <00:13:53.579>after <00:13:53.755>the <00:13:53.930>DOM <00:13:54.105>changes, <00:13:54.280>the <00:13:54.454>browser <00:13:54.630>gets <00:13:54.805>notified

253
00:13:55.785 --> 00:13:57.145
<00:13:55.785>to <00:13:56.091>take <00:13:56.396>the <00:13:56.703>after <00:13:57.009>screenshot.

254
00:13:57.645 --> 00:14:00.625
<00:13:57.645>So <00:13:57.845>for <00:13:58.045>Angular, <00:13:58.245>um, <00:13:58.444>the <00:13:58.645>angular <00:13:58.845>devs, <00:13:59.045>um,

255
00:14:01.065 --> 00:14:05.705
<00:14:01.065>provided <00:14:01.220>us <00:14:01.376>with <00:14:01.531>a, <00:14:01.687>uh, <00:14:01.842>with <00:14:01.998>a, <00:14:02.153>um, <00:14:02.309>convenience <00:14:02.465>function.

256
00:14:06.605 --> 00:14:08.025
<00:14:06.605>So <00:14:06.860>we <00:14:07.116>have <00:14:07.371>the <00:14:07.627>routing <00:14:07.883>process

257
00:14:08.885 --> 00:14:12.105
<00:14:08.885>and <00:14:09.085>we <00:14:09.285>can, <00:14:09.485>we <00:14:09.685>can <00:14:09.885>all <00:14:10.085>just <00:14:10.285>use

258
00:14:12.765 --> 00:14:16.145
<00:14:12.765>the <00:14:12.939>feature <00:14:13.115>flag <00:14:13.290>or <00:14:13.465>the <00:14:13.640>feature <00:14:13.814>with <00:14:13.990>real <00:14:14.165>transitions

259
00:14:16.485 --> 00:14:21.265
<00:14:16.485>and <00:14:16.685>just <00:14:16.885>include <00:14:17.085>that <00:14:17.285>I <00:14:17.485>save <00:14:17.685>my <00:14:17.885>application.

260
00:14:21.765 --> 00:14:25.945
<00:14:21.765>And <00:14:21.920>now, <00:14:22.076>um, <00:14:22.231>you <00:14:22.387>might <00:14:22.542>notice <00:14:22.698>a <00:14:22.853>slide <00:14:23.009>cross <00:14:23.165>fade.

261
00:14:26.005 --> 00:14:29.185
<00:14:26.005>So <00:14:26.180>it, <00:14:26.355>it's <00:14:26.530>get, <00:14:26.705>it <00:14:26.880>gets <00:14:27.055>more, <00:14:27.230>um, <00:14:27.405>precise.

262
00:14:29.685 --> 00:14:34.505
<00:14:29.685>We <00:14:29.840>also <00:14:29.996>go <00:14:30.151>here <00:14:30.307>animation <00:14:30.462>panel, <00:14:30.618>slow <00:14:30.773>down <00:14:30.929>the <00:14:31.084>animation

263
00:14:36.095 --> 00:14:38.515
<00:14:36.095>a <00:14:36.375>bit <00:14:36.655>and <00:14:36.935>have <00:14:37.215>a <00:14:37.495>look.

264
00:14:39.175 --> 00:14:43.435
<00:14:39.175>So <00:14:39.330>you <00:14:39.486>notice <00:14:39.641>it's <00:14:39.797>a, <00:14:39.952>a <00:14:40.108>subtle <00:14:40.263>cross <00:14:40.419>fade <00:14:40.574>animation,

265
00:14:43.655 --> 00:14:44.715
<00:14:43.655>and <00:14:43.973>that's <00:14:44.291>a <00:14:44.609>default.

266
00:14:45.295 --> 00:14:47.315
<00:14:45.295>So <00:14:45.645>the <00:14:45.995>default <00:14:46.344>must <00:14:46.694>come.

267
00:14:47.895 --> 00:14:49.995
<00:14:47.895>Uh, <00:14:48.095>so <00:14:48.295>where <00:14:48.495>does <00:14:48.694>the <00:14:48.895>default <00:14:49.095>come <00:14:49.295>from?

268
00:14:50.295 --> 00:14:53.525
<00:14:50.295>The <00:14:50.469>default <00:14:50.645>animations <00:14:50.819>that <00:14:50.995>are, <00:14:51.170>that <00:14:51.344>you <00:14:51.520>see <00:14:51.694>on

269
00:14:53.525 --> 00:14:55.365
<00:14:53.525>what <00:14:53.758>you <00:14:53.991>get <00:14:54.225>when <00:14:54.458>you <00:14:54.691>use, <00:14:54.925>uh,

270
00:14:55.435 --> 00:14:59.165
<00:14:55.435>just <00:14:55.562>use <00:14:55.689>the <00:14:55.816>star <00:14:55.944>view <00:14:56.071>transition <00:14:56.198>out <00:14:56.325>of <00:14:56.453>the <00:14:56.580>box <00:14:56.707>is <00:14:56.834>based

271
00:14:59.385 --> 00:15:02.125
<00:14:59.385>or <00:14:59.560>the <00:14:59.735>are <00:14:59.910>based <00:15:00.085>in <00:15:00.260>the <00:15:00.435>browser <00:15:00.610>style <00:15:00.785>sheet.

272
00:15:02.265 --> 00:15:05.525
<00:15:02.265>The <00:15:02.439>browser <00:15:02.615>style <00:15:02.790>sheet <00:15:02.965>also <00:15:03.140>redefines <00:15:03.314>these, <00:15:03.490>um, <00:15:03.665>base,

273
00:15:05.825 --> 00:15:06.925
<00:15:05.825>uh, <00:15:06.320>base <00:15:06.814>animations.

274
00:15:07.305 --> 00:15:11.605
<00:15:07.305>Um, <00:15:07.460>you <00:15:07.616>can <00:15:07.771>identify <00:15:07.927>them <00:15:08.082>via <00:15:08.238>the <00:15:08.393>UA <00:15:08.549>view <00:15:08.704>transitions

275
00:15:11.625 --> 00:15:13.845
<00:15:11.625>or <00:15:11.905>view <00:15:12.185>transition <00:15:12.465>fade <00:15:12.745>out <00:15:13.025>animations.

276
00:15:13.845 --> 00:15:18.105
<00:15:13.845>These <00:15:14.000>are <00:15:14.156>the <00:15:14.311>predefined <00:15:14.467>animations, <00:15:14.622>so <00:15:14.778>you <00:15:14.933>can <00:15:15.089>use <00:15:15.245>them,

277
00:15:18.845 --> 00:15:22.065
<00:15:18.845>but <00:15:18.985>we <00:15:19.125>are <00:15:19.265>in <00:15:19.405>CSS, <00:15:19.545>so <00:15:19.685>you <00:15:19.825>can <00:15:19.965>also <00:15:20.105>override <00:15:20.245>them

278
00:15:22.165 --> 00:15:26.145
<00:15:22.165>to <00:15:22.320>create <00:15:22.476>your <00:15:22.631>custom <00:15:22.787>and, <00:15:22.942>uh, <00:15:23.098>user <00:15:23.253>experience <00:15:23.409>with <00:15:23.564>that.

279
00:15:26.805 --> 00:15:30.785
<00:15:26.805>So <00:15:26.979>what <00:15:27.155>we <00:15:27.329>saw <00:15:27.505>until <00:15:27.680>now <00:15:27.854>was, <00:15:28.030>uh, <00:15:28.204>the,

280
00:15:30.865 --> 00:15:32.305
<00:15:30.865>a <00:15:31.297>whole <00:15:31.728>page <00:15:32.161>transition.

281
00:15:32.805 --> 00:15:36.345
<00:15:32.805>So <00:15:32.960>in <00:15:33.116>the <00:15:33.271>default <00:15:33.427>settings, <00:15:33.582>we <00:15:33.738>make <00:15:33.893>a <00:15:34.049>cross <00:15:34.204>fade

282
00:15:36.345 --> 00:15:37.745
<00:15:36.345>of <00:15:36.660>the <00:15:36.975>whole <00:15:37.290>page <00:15:37.605>document.

283
00:15:37.925 --> 00:15:41.185
<00:15:37.925>That's <00:15:38.125>nice, <00:15:38.324>but <00:15:38.525>sometimes <00:15:38.724>we <00:15:38.925>want <00:15:39.125>to <00:15:39.324>extract

284
00:15:41.325 --> 00:15:43.465
<00:15:41.325>or <00:15:41.605>cut <00:15:41.885>out <00:15:42.165>some <00:15:42.445>sub <00:15:42.725>elements

285
00:15:43.765 --> 00:15:47.585
<00:15:43.765>or <00:15:43.998>even <00:15:44.231>animate <00:15:44.465>them <00:15:44.698>with <00:15:44.931>different <00:15:45.165>animations,

286
00:15:48.005 --> 00:15:50.185
<00:15:48.005>do <00:15:48.205>some <00:15:48.405>nice <00:15:48.605>fancy <00:15:48.805>thing <00:15:49.005>things <00:15:49.205>with <00:15:49.405>them.

287
00:15:50.765 --> 00:15:54.025
<00:15:50.765>And <00:15:50.998>that's <00:15:51.231>where, <00:15:51.465>um, <00:15:51.698>view <00:15:51.931>transition <00:15:52.165>names

288
00:15:54.685 --> 00:15:56.305
<00:15:54.685>te <00:15:55.035>come <00:15:55.385>into <00:15:55.734>the <00:15:56.084>play.

289
00:15:56.645 --> 00:16:01.625
<00:15:56.645>That's <00:15:56.800>the, <00:15:56.956>the, <00:15:57.111>um, <00:15:57.267>the <00:15:57.422>workflow <00:15:57.578>of <00:15:57.733>the <00:15:57.889>view <00:15:58.045>transitions.

290
00:16:02.005 --> 00:16:05.545
<00:16:02.005>So <00:16:02.285>we <00:16:02.564>have <00:16:02.845>another, <00:16:03.125>um, <00:16:03.405>possibility

291
00:16:05.885 --> 00:16:07.305
<00:16:05.885>to <00:16:06.204>cut <00:16:06.524>out <00:16:06.843>some <00:16:07.163>elements.

292
00:16:07.645 --> 00:16:09.745
<00:16:07.645>So <00:16:07.845>for <00:16:08.045>example, <00:16:08.245>in <00:16:08.444>this <00:16:08.645>case, <00:16:08.845>that <00:16:09.045>case

293
00:16:10.345 --> 00:16:12.065
<00:16:10.345>I <00:16:10.625>cut <00:16:10.905>out <00:16:11.185>the <00:16:11.465>header <00:16:11.745>element.

294
00:16:12.655 --> 00:16:15.745
<00:16:12.655>Then <00:16:12.829>we <00:16:13.005>trans <00:16:13.180>do <00:16:13.355>our <00:16:13.530>magic <00:16:13.704>in <00:16:13.880>the <00:16:14.055>background

295
00:16:15.845 --> 00:16:18.465
<00:16:15.845>and <00:16:16.078>we <00:16:16.311>cross <00:16:16.545>fade <00:16:16.778>these <00:16:17.011>two <00:16:17.245>elements.

296
00:16:18.805 --> 00:16:21.585
<00:16:18.805>So <00:16:18.960>when <00:16:19.116>I <00:16:19.271>change <00:16:19.427>the <00:16:19.582>position <00:16:19.738>of <00:16:19.893>the <00:16:20.049>header <00:16:20.204>element,

297
00:16:21.805 --> 00:16:26.425
<00:16:21.805>the <00:16:22.005>browser <00:16:22.204>also <00:16:22.405>does <00:16:22.604>some <00:16:22.805>fancy, <00:16:23.005>um, <00:16:23.204>um,

298
00:16:26.425 --> 00:16:28.025
<00:16:26.425>automatic <00:16:26.891>animations <00:16:27.358>with <00:16:27.824>that.

299
00:16:28.245 --> 00:16:29.265
<00:16:28.245>And <00:16:28.474>how <00:16:28.704>does <00:16:28.933>this <00:16:29.163>work?

300
00:16:29.445 --> 00:16:30.785
<00:16:29.445>So <00:16:29.847>we <00:16:30.249>saw <00:16:30.651>earlier

301
00:16:30.975 --> 00:16:34.025
<00:16:30.975>that <00:16:31.175>the <00:16:31.375>browser <00:16:31.575>creates <00:16:31.775>a <00:16:31.975>new <00:16:32.175>dom <00:16:32.375>structure

302
00:16:34.165 --> 00:16:36.225
<00:16:34.165>for <00:16:34.444>the <00:16:34.724>default <00:16:35.005>view <00:16:35.285>transition <00:16:35.564>for,

303
00:16:36.225 --> 00:16:41.065
<00:16:36.225>and <00:16:36.332>for <00:16:36.440>every <00:16:36.548>element <00:16:36.655>that <00:16:36.763>I <00:16:36.871>want <00:16:36.978>to <00:16:37.086>cut <00:16:37.194>out <00:16:37.301>of <00:16:37.409>my <00:16:37.517>view, <00:16:37.625>um,

304
00:16:42.095 --> 00:16:44.905
<00:16:42.095>also <00:16:42.445>gets <00:16:42.795>another <00:16:43.145>view <00:16:43.495>transition,

305
00:16:45.845 --> 00:16:47.625
<00:16:45.845>um, <00:16:46.545>dom <00:16:47.245>representation.

306
00:16:48.165 --> 00:16:49.785
<00:16:48.165>So <00:16:48.631>also <00:16:49.098>can <00:16:49.564>interact

307
00:16:49.785 --> 00:16:52.265
<00:16:49.785>with <00:16:49.985>these <00:16:50.185>dom <00:16:50.385>elements <00:16:50.584>in <00:16:50.785>a <00:16:50.985>separate <00:16:51.185>way.

308
00:16:52.645 --> 00:16:55.705
<00:16:52.645>And <00:16:52.819>to <00:16:52.995>cut <00:16:53.170>out <00:16:53.345>such <00:16:53.520>elements, <00:16:53.694>we <00:16:53.870>just <00:16:54.045>have

309
00:16:55.705 --> 00:16:58.665
<00:16:55.705>to <00:16:55.905>give <00:16:56.105>them <00:16:56.305>a <00:16:56.505>view <00:16:56.705>transition <00:16:56.905>name <00:16:57.105>property.

310
00:16:59.165 --> 00:17:02.585
<00:16:59.165>And <00:16:59.339>when <00:16:59.515>we <00:16:59.689>have <00:16:59.865>the, <00:17:00.040>the <00:17:00.214>before <00:17:00.390>and <00:17:00.564>the

311
00:17:02.585 --> 00:17:05.625
<00:17:02.585>after <00:17:02.760>state, <00:17:02.935>maybe <00:17:03.110>you <00:17:03.285>have <00:17:03.460>your <00:17:03.635>header <00:17:03.810>up <00:17:03.985>there

312
00:17:06.005 --> 00:17:09.385
<00:17:06.005>and <00:17:06.121>your <00:17:06.238>header <00:17:06.355>moves <00:17:06.471>in <00:17:06.588>some <00:17:06.705>way <00:17:06.821>in <00:17:06.938>the, <00:17:07.055>in <00:17:07.171>the <00:17:07.288>later <00:17:07.405>view.

313
00:17:09.805 --> 00:17:13.515
<00:17:09.805>So <00:17:09.945>you <00:17:10.085>can, <00:17:10.225>um, <00:17:10.365>name <00:17:10.505>your <00:17:10.645>header <00:17:10.785>in <00:17:10.925>the <00:17:11.065>old <00:17:11.205>view

314
00:17:13.655 --> 00:17:16.075
<00:17:13.655>and <00:17:13.795>in <00:17:13.935>the <00:17:14.075>new <00:17:14.214>view <00:17:14.355>with <00:17:14.494>the <00:17:14.635>same <00:17:14.774>view <00:17:14.915>transition <00:17:15.055>name.

315
00:17:16.075 --> 00:17:19.075
<00:17:16.075>And <00:17:16.425>the <00:17:16.775>browser <00:17:17.125>automated <00:17:17.475>detects

316
00:17:19.545 --> 00:17:22.315
<00:17:19.545>that <00:17:19.825>these <00:17:20.105>two <00:17:20.385>parts <00:17:20.665>belong <00:17:20.945>together

317
00:17:22.575 --> 00:17:24.955
<00:17:22.575>and <00:17:22.808>transforms <00:17:23.041>them <00:17:23.275>even <00:17:23.508>in <00:17:23.741>the <00:17:23.975>position.

318
00:17:25.375 --> 00:17:29.155
<00:17:25.375>So <00:17:25.502>we <00:17:25.629>will <00:17:25.756>have <00:17:25.884>a <00:17:26.011>look <00:17:26.138>at <00:17:26.265>that <00:17:26.393>now <00:17:26.520>in <00:17:26.647>our <00:17:26.775>example.

319
00:17:31.795 --> 00:17:36.575
<00:17:31.795>So <00:17:31.995>in <00:17:32.195>my <00:17:32.395>app, <00:17:32.595>let's <00:17:32.795>have <00:17:32.995>a <00:17:33.195>look.

320
00:17:36.675 --> 00:17:38.655
<00:17:36.675>Um, <00:17:36.875>I <00:17:37.075>will <00:17:37.274>make <00:17:37.475>it <00:17:37.675>a <00:17:37.875>bit <00:17:38.075>easier

321
00:17:39.205 --> 00:17:42.175
<00:17:39.205>because, <00:17:39.671>um, <00:17:40.138>I <00:17:40.605>have,

322
00:17:42.655 --> 00:17:44.415
<00:17:42.655>I <00:17:42.855>have <00:17:43.055>a <00:17:43.254>list <00:17:43.455>here <00:17:43.655>in <00:17:43.855>our <00:17:44.055>example,

323
00:17:45.115 --> 00:17:47.975
<00:17:45.115>and <00:17:45.255>I <00:17:45.395>do, <00:17:45.535>I <00:17:45.675>render <00:17:45.815>the <00:17:45.955>list <00:17:46.095>with <00:17:46.235>the <00:17:46.375>NG <00:17:46.515>four.

324
00:17:48.675 --> 00:17:53.405
<00:17:48.675>The <00:17:48.875>view <00:17:49.075>transition <00:17:49.274>name <00:17:49.475>has, <00:17:49.675>um, <00:17:49.875>the, <00:17:50.075>um,

325
00:17:53.625 --> 00:17:58.565
<00:17:53.625>the <00:17:53.800>specialty <00:17:53.975>that <00:17:54.150>you <00:17:54.325>only, <00:17:54.500>that <00:17:54.675>you <00:17:54.850>only <00:17:55.025>should,

326
00:17:58.665 --> 00:18:02.845
<00:17:58.665>um, <00:17:58.805>name <00:17:58.945>an <00:17:59.085>element <00:17:59.225>once <00:17:59.365>with <00:17:59.504>the, <00:17:59.645>with <00:17:59.784>the <00:17:59.925>same <00:18:00.065>name.

327
00:18:02.905 --> 00:18:04.845
<00:18:02.905>So <00:18:03.138>the <00:18:03.371>name <00:18:03.605>has <00:18:03.838>to <00:18:04.071>be <00:18:04.305>distinct.

328
00:18:05.945 --> 00:18:10.805
<00:18:05.945>So <00:18:06.061>in <00:18:06.178>the <00:18:06.294>case <00:18:06.411>of <00:18:06.528>my <00:18:06.645>for <00:18:06.761>loop, <00:18:06.878>it <00:18:06.995>would <00:18:07.111>cause <00:18:07.228>some <00:18:07.345>error.

329
00:18:11.065 --> 00:18:14.765
<00:18:11.065>So <00:18:11.298>for <00:18:11.531>simplicity, <00:18:11.765>I <00:18:11.998>will <00:18:12.231>transform <00:18:12.465>my,

330
00:18:15.545 --> 00:18:19.445
<00:18:15.545>my <00:18:15.685>header <00:18:15.825>element <00:18:15.965>to <00:18:16.105>the <00:18:16.245>image <00:18:16.385>element <00:18:16.525>in <00:18:16.665>the <00:18:16.805>later <00:18:16.945>view.

331
00:18:19.865 --> 00:18:23.685
<00:18:19.865>And <00:18:20.005>we'll <00:18:20.145>have <00:18:20.285>a <00:18:20.425>look <00:18:20.565>at <00:18:20.705>what <00:18:20.845>the <00:18:20.985>result <00:18:21.125>will <00:18:21.265>be.

332
00:18:24.385 --> 00:18:28.845
<00:18:24.385>So <00:18:24.525>I <00:18:24.665>have <00:18:24.805>here <00:18:24.945>my <00:18:25.085>workout <00:18:25.225>planner, <00:18:25.365>um, <00:18:25.504>my <00:18:25.645>workout, <00:18:25.785>let's,

333
00:18:29.555 --> 00:18:31.565
<00:18:29.555>okay, <00:18:30.021>now, <00:18:30.488>uh, <00:18:30.955>detail.

334
00:18:31.915 --> 00:18:33.645
<00:18:31.915>Okay, <00:18:32.148>now <00:18:32.381>we <00:18:32.615>have <00:18:32.848>the <00:18:33.081>detail <00:18:33.315>view

335
00:18:34.185 --> 00:18:36.165
<00:18:34.185>and <00:18:34.385>here's <00:18:34.585>the <00:18:34.784>image <00:18:34.985>of <00:18:35.185>the <00:18:35.385>detail <00:18:35.585>view.

336
00:18:36.285 --> 00:18:37.885
<00:18:36.285>I <00:18:36.518>want <00:18:36.751>to <00:18:36.985>transition <00:18:37.218>my <00:18:37.451>header <00:18:37.685>to.

337
00:18:38.025 --> 00:18:42.885
<00:18:38.025>So <00:18:38.152>I <00:18:38.279>look <00:18:38.406>at <00:18:38.534>my <00:18:38.661>image <00:18:38.788>tag, <00:18:38.915>I <00:18:39.043>go <00:18:39.170>here, <00:18:39.297>save <00:18:39.425>you

338
00:18:44.155 --> 00:18:47.825
<00:18:44.155>transition <00:18:44.435>name <00:18:44.715>and <00:18:44.995>call <00:18:45.274>it <00:18:45.555>image.

339
00:18:50.785 --> 00:18:53.445
<00:18:50.785>So, <00:18:51.018>and <00:18:51.251>we <00:18:51.485>hit, <00:18:51.718>we <00:18:51.951>hit <00:18:52.185>save.

340
00:18:53.995 --> 00:18:57.995
<00:18:53.995>Then <00:18:54.274>we, <00:18:54.554>we <00:18:54.834>work <00:18:55.114>out <00:18:55.395>planner

341
00:18:58.415 --> 00:18:59.475
<00:18:58.415>in <00:18:58.733>our <00:18:59.051>workout <00:18:59.369>planner.

342
00:18:59.495 --> 00:19:01.275
<00:18:59.495>We <00:18:59.728>have <00:18:59.961>our <00:19:00.195>header <00:19:00.428>element. <00:19:00.661>We <00:19:00.895>want

343
00:19:01.275 --> 00:19:03.075
<00:19:01.275>to <00:19:01.555>see <00:19:01.835>transition <00:19:02.115>our <00:19:02.395>header <00:19:02.675>element.

344
00:19:05.455 --> 00:19:10.145
<00:19:05.455>We <00:19:05.582>also <00:19:05.709>make <00:19:05.836>a <00:19:05.964>view <00:19:06.091>transition <00:19:06.218>name, <00:19:06.345>same <00:19:06.473>name <00:19:06.600>as <00:19:06.727>the <00:19:06.855>image.

345
00:19:12.755 --> 00:19:16.175
<00:19:12.755>Save <00:19:12.882>that. <00:19:13.009>And <00:19:13.136>now <00:19:13.264>we <00:19:13.391>will <00:19:13.518>have <00:19:13.645>a <00:19:13.773>look <00:19:13.900>what <00:19:14.027>will <00:19:14.155>happen.

346
00:19:16.715 --> 00:19:20.215
<00:19:16.715>So <00:19:16.831>if <00:19:16.948>I <00:19:17.064>navigate, <00:19:17.181>you <00:19:17.298>see <00:19:17.415>we <00:19:17.531>have <00:19:17.648>a <00:19:17.764>nice <00:19:17.881>and <00:19:17.998>subtle <00:19:18.115>effect.

347
00:19:21.135 --> 00:19:24.575
<00:19:21.135>I <00:19:21.242>even <00:19:21.350>slow <00:19:21.458>it <00:19:21.565>down <00:19:21.673>a <00:19:21.781>bit <00:19:21.888>more <00:19:21.996>so <00:19:22.104>we <00:19:22.211>can <00:19:22.319>see <00:19:22.427>what <00:19:22.535>happens.

348
00:19:25.035 --> 00:19:28.855
<00:19:25.035>So <00:19:25.190>I <00:19:25.346>named <00:19:25.501>the <00:19:25.657>header <00:19:25.812>the <00:19:25.968>same <00:19:26.123>mute <00:19:26.279>incision <00:19:26.435>name,

349
00:19:28.875 --> 00:19:32.735
<00:19:28.875>AC <00:19:29.030>image <00:19:29.186>in <00:19:29.341>the, <00:19:29.497>in <00:19:29.652>the, <00:19:29.808>in <00:19:29.963>the <00:19:30.119>afterwards <00:19:30.275>navigation.

350
00:19:32.955 --> 00:19:35.695
<00:19:32.955>So <00:19:33.188>the <00:19:33.421>browser <00:19:33.655>detects <00:19:33.888>these <00:19:34.121>two, <00:19:34.355>um,

351
00:19:36.025 --> 00:19:37.895
<00:19:36.025>pairs <00:19:36.491>com <00:19:36.958>belong <00:19:37.425>together

352
00:19:38.315 --> 00:19:40.615
<00:19:38.315>and <00:19:38.595>also <00:19:38.875>performs <00:19:39.155>the <00:19:39.435>default <00:19:39.715>animation

353
00:19:41.205 --> 00:19:45.535
<00:19:41.205>that <00:19:41.360>is <00:19:41.516>also <00:19:41.671>defined <00:19:41.827>in <00:19:41.982>the <00:19:42.138>browsers, <00:19:42.293>um, <00:19:42.449>style <00:19:42.605>sheet

354
00:19:46.085 --> 00:19:50.015
<00:19:46.085>that <00:19:46.260>performs <00:19:46.435>this <00:19:46.610>kind <00:19:46.785>of <00:19:46.960>movement <00:19:47.135>in <00:19:47.310>your <00:19:47.485>view,

355
00:19:50.015 --> 00:19:52.695
<00:19:50.015>transition, <00:19:50.190>nice <00:19:50.365>and <00:19:50.540>easy <00:19:50.715>effect <00:19:50.890>out <00:19:51.065>of <00:19:51.240>the <00:19:51.415>box.

356
00:19:53.235 --> 00:19:57.295
<00:19:53.235>Not <00:19:53.375>much <00:19:53.514>of, <00:19:53.655>uh, <00:19:53.794>CSS <00:19:53.935>that <00:19:54.074>we <00:19:54.215>need <00:19:54.354>for <00:19:54.495>that <00:19:54.635>effect.

357
00:19:57.855 --> 00:20:01.415
<00:19:57.855>I <00:19:58.088>think <00:19:58.321>it's <00:19:58.555>a <00:19:58.788>quite <00:19:59.021>impressing <00:19:59.255>illustration

358
00:20:01.565 --> 00:20:03.815
<00:20:01.565>what <00:20:01.765>the <00:20:01.965>view <00:20:02.165>transition <00:20:02.365>can <00:20:02.565>do <00:20:02.765>for <00:20:02.965>us.

359
00:20:04.605 --> 00:20:07.655
<00:20:04.605>When <00:20:04.760>you <00:20:04.916>do <00:20:05.071>want <00:20:05.227>to <00:20:05.382>do, <00:20:05.538>perform <00:20:05.693>some <00:20:05.849>fancy <00:20:06.005>animations,

360
00:20:07.655 --> 00:20:10.935
<00:20:07.655>like <00:20:07.810>you <00:20:07.966>saw <00:20:08.121>earlier <00:20:08.277>in <00:20:08.432>my <00:20:08.588>example <00:20:08.743>with <00:20:08.899>the <00:20:09.055>exercise,

361
00:20:11.195 --> 00:20:15.615
<00:20:11.195>you <00:20:11.302>need <00:20:11.410>a <00:20:11.518>par, <00:20:11.625>um, <00:20:11.733>um, <00:20:11.841>um, <00:20:11.948>some <00:20:12.056>lines <00:20:12.164>of <00:20:12.271>Cs, <00:20:12.379>more <00:20:12.487>of <00:20:12.595>Cs,

362
00:20:15.795 --> 00:20:17.695
<00:20:15.795>but <00:20:16.075>it's <00:20:16.355>not, <00:20:16.635>uh, <00:20:16.915>so <00:20:17.195>complicated.

363
00:20:17.715 --> 00:20:19.815
<00:20:17.715>If <00:20:17.995>you're <00:20:18.274>interested <00:20:18.554>in <00:20:18.834>the <00:20:19.115>details,

364
00:20:20.475 --> 00:20:22.175
<00:20:20.475>you <00:20:20.754>can <00:20:21.034>catch <00:20:21.314>me <00:20:21.594>up <00:20:21.875>later

365
00:20:22.175 --> 00:20:24.375
<00:20:22.175>and <00:20:22.350>we <00:20:22.524>can <00:20:22.700>talk <00:20:22.875>in <00:20:23.050>detail <00:20:23.225>about <00:20:23.399>the <00:20:23.575>demo.

366
00:20:25.395 --> 00:20:29.575
<00:20:25.395>So <00:20:25.745>that's <00:20:26.095>about <00:20:26.445>view <00:20:26.795>transitions.

367
00:20:29.715 --> 00:20:32.375
<00:20:29.715>Now <00:20:29.842>we <00:20:29.969>can <00:20:30.096>take <00:20:30.224>a <00:20:30.351>look <00:20:30.478>in <00:20:30.605>the <00:20:30.733>future, <00:20:30.860>what <00:20:30.987>will <00:20:31.115>happen

368
00:20:32.405 --> 00:20:34.095
<00:20:32.405>with <00:20:32.685>view <00:20:32.965>transitions <00:20:33.245>in <00:20:33.524>the <00:20:33.805>future.

369
00:20:34.405 --> 00:20:37.735
<00:20:34.405>It's <00:20:34.580>a <00:20:34.754>new <00:20:34.930>API. <00:20:35.105>Um, <00:20:35.280>I <00:20:35.455>hope <00:20:35.629>this <00:20:35.805>support

370
00:20:37.875 --> 00:20:42.215
<00:20:37.875>for <00:20:38.030>you <00:20:38.186>transitions <00:20:38.341>in <00:20:38.497>Firefox <00:20:38.652>will <00:20:38.808>be <00:20:38.963>shipped <00:20:39.119>very <00:20:39.275>soon,

371
00:20:43.035 --> 00:20:47.285
<00:20:43.035>but <00:20:43.190>I <00:20:43.346>unfortunately <00:20:43.501>have <00:20:43.657>not <00:20:43.812>a <00:20:43.968>good <00:20:44.123>feeling <00:20:44.279>about <00:20:44.435>that.

372
00:20:47.865 --> 00:20:51.565
<00:20:47.865>And <00:20:47.992>in <00:20:48.119>terms <00:20:48.246>of <00:20:48.374>view <00:20:48.501>transitions, <00:20:48.628>there <00:20:48.755>is <00:20:48.883>also <00:20:49.010>a <00:20:49.137>new <00:20:49.265>spec

373
00:20:52.115 --> 00:20:55.605
<00:20:52.115>that <00:20:52.315>is <00:20:52.515>not <00:20:52.715>implemented <00:20:52.915>yet, <00:20:53.115>but <00:20:53.315>it's <00:20:53.515>proposed.

374
00:20:56.075 --> 00:20:58.925
<00:20:56.075>It's <00:20:56.308>the, <00:20:56.541>the <00:20:56.775>term <00:20:57.008>of <00:20:57.241>scope <00:20:57.475>transitions.

375
00:20:59.305 --> 00:21:01.005
<00:20:59.305>So <00:20:59.585>what <00:20:59.865>will <00:21:00.145>be <00:21:00.425>scope <00:21:00.705>transitions.

376
00:21:01.505 --> 00:21:03.965
<00:21:01.505>Um, <00:21:01.660>we <00:21:01.816>have <00:21:01.971>the <00:21:02.127>view <00:21:02.282>transition <00:21:02.438>area <00:21:02.593>that <00:21:02.749>we <00:21:02.905>saw

377
00:21:05.305 --> 00:21:09.285
<00:21:05.305>and <00:21:05.480>scope <00:21:05.655>transitions <00:21:05.830>will <00:21:06.005>be <00:21:06.180>view <00:21:06.355>transitions <00:21:06.530>in <00:21:06.705>sub

378
00:21:09.285 --> 00:21:12.205
<00:21:09.285>elements <00:21:09.460>of <00:21:09.635>our <00:21:09.810>page <00:21:09.985>so <00:21:10.160>that, <00:21:10.335>uh, <00:21:10.510>for <00:21:10.685>example,

379
00:21:12.365 --> 00:21:15.725
<00:21:12.365>I <00:21:12.540>have <00:21:12.715>a <00:21:12.890>card <00:21:13.065>element <00:21:13.240>within <00:21:13.415>my, <00:21:13.590>my <00:21:13.765>application

380
00:21:16.145 --> 00:21:19.565
<00:21:16.145>and <00:21:16.345>I <00:21:16.545>want <00:21:16.745>to <00:21:16.945>perform <00:21:17.145>sub <00:21:17.345>view <00:21:17.545>transitions

381
00:21:19.585 --> 00:21:20.605
<00:21:19.585>of <00:21:19.891>that <00:21:20.197>card <00:21:20.503>element.

382
00:21:21.355 --> 00:21:24.165
<00:21:21.355>Then <00:21:21.588>scope <00:21:21.821>transitions <00:21:22.055>will <00:21:22.288>be <00:21:22.521>a <00:21:22.755>possibility

383
00:21:24.585 --> 00:21:27.645
<00:21:24.585>to <00:21:24.785>attach <00:21:24.985>these <00:21:25.185>sub <00:21:25.385>view <00:21:25.585>transition <00:21:25.785>dome <00:21:25.985>trees

384
00:21:27.645 --> 00:21:30.765
<00:21:27.645>that <00:21:27.845>we <00:21:28.045>saw <00:21:28.245>earlier <00:21:28.445>above <00:21:28.645>these <00:21:28.845>car <00:21:29.045>elements.

385
00:21:30.785 --> 00:21:34.375
<00:21:30.785>So <00:21:30.960>within <00:21:31.135>my <00:21:31.310>dome <00:21:31.485>there <00:21:31.660>will <00:21:31.835>be <00:21:32.010>the <00:21:32.185>problem

386
00:21:34.525 --> 00:21:36.975
<00:21:34.525>with <00:21:34.758>interference <00:21:34.991>and <00:21:35.225>z <00:21:35.458>index <00:21:35.691>and <00:21:35.925>layers,

387
00:21:37.515 --> 00:21:40.615
<00:21:37.515>but <00:21:37.748>um, <00:21:37.981>it'll <00:21:38.215>also <00:21:38.448>be <00:21:38.681>a <00:21:38.915>cool

388
00:21:40.615 --> 00:21:44.295
<00:21:40.615>and <00:21:40.848>nice <00:21:41.081>feature <00:21:41.315>to, <00:21:41.548>um, <00:21:41.781>enhance <00:21:42.015>the,

389
00:21:44.675 --> 00:21:47.175
<00:21:44.675>the <00:21:44.955>web <00:21:45.235>APIs <00:21:45.514>in <00:21:45.794>the <00:21:46.075>future.

390
00:21:47.755 --> 00:21:51.655
<00:21:47.755>So, <00:21:47.910>and <00:21:48.066>also <00:21:48.221>a <00:21:48.377>nice <00:21:48.532>thing <00:21:48.688>that <00:21:48.843>was <00:21:48.999>shipped, <00:21:49.155>um,

391
00:21:51.655 --> 00:21:53.575
<00:21:51.655>during <00:21:52.004>the <00:21:52.355>last <00:21:52.705>few <00:21:53.055>months

392
00:21:53.635 --> 00:21:55.695
<00:21:53.635>or <00:21:53.915>weeks <00:21:54.195>is <00:21:54.475>that <00:21:54.754>view <00:21:55.035>transitions,

393
00:21:55.765 --> 00:21:58.015
<00:21:55.765>like <00:21:55.998>I <00:21:56.231>demonstrated <00:21:56.465>them <00:21:56.698>in <00:21:56.931>my <00:21:57.165>examples

394
00:21:58.145 --> 00:22:00.335
<00:21:58.145>where <00:21:58.495>single <00:21:58.845>page <00:21:59.195>fusion <00:21:59.545>sessions,

395
00:22:00.355 --> 00:22:03.775
<00:22:00.355>so <00:22:00.482>we <00:22:00.609>could <00:22:00.736>use <00:22:00.864>them <00:22:00.991>in <00:22:01.118>our <00:22:01.245>single <00:22:01.373>page <00:22:01.500>applications <00:22:01.627>when <00:22:01.755>we

396
00:22:03.775 --> 00:22:05.255
<00:22:03.775>have <00:22:04.441>multi-page <00:22:05.107>applications.

397
00:22:05.645 --> 00:22:09.055
<00:22:05.645>This <00:22:05.820>wouldn't <00:22:05.995>have <00:22:06.170>been <00:22:06.345>possible <00:22:06.520>until <00:22:06.695>a <00:22:06.870>few <00:22:07.045>months

398
00:22:09.055 --> 00:22:12.855
<00:22:09.055>or <00:22:09.210>weeks <00:22:09.366>ago <00:22:09.521>when <00:22:09.677>the <00:22:09.832>Chrome <00:22:09.988>developer <00:22:10.143>team <00:22:10.299>also <00:22:10.455>announced

399
00:22:12.855 --> 00:22:16.175
<00:22:12.855>that <00:22:13.055>multi-page <00:22:13.255>future <00:22:13.455>transitions <00:22:13.655>are <00:22:13.855>shipped <00:22:14.055>to <00:22:14.255>chromium,

400
00:22:16.355 --> 00:22:19.295
<00:22:16.355>but <00:22:16.588>they're <00:22:16.821>currently <00:22:17.055>only <00:22:17.288>available <00:22:17.521>in <00:22:17.755>chromium.

401
00:22:19.795 --> 00:22:21.695
<00:22:19.795>So, <00:22:20.075>um, <00:22:20.355>we <00:22:20.635>have <00:22:20.915>to <00:22:21.195>wait

402
00:22:21.905 --> 00:22:25.055
<00:22:21.905>until <00:22:22.105>these <00:22:22.305>multi <00:22:22.504>view <00:22:22.705>incisions <00:22:22.905>are <00:22:23.105>also <00:22:23.305>available

403
00:22:25.195 --> 00:22:26.615
<00:22:25.195>for <00:22:25.450>a <00:22:25.706>wider <00:22:25.961>range <00:22:26.217>of <00:22:26.473>users.

404
00:22:27.845 --> 00:22:30.575
<00:22:27.845>Another <00:22:28.125>ex <00:22:28.405>quick <00:22:28.685>example <00:22:28.965>I <00:22:29.245>want

405
00:22:30.575 --> 00:22:33.535
<00:22:30.575>to <00:22:30.715>show <00:22:30.855>you <00:22:30.995>is <00:22:31.135>you <00:22:31.275>can <00:22:31.415>also <00:22:31.555>get <00:22:31.695>a <00:22:31.835>bit <00:22:31.975>creative

406
00:22:34.005 --> 00:22:35.535
<00:22:34.005>with <00:22:34.464>your <00:22:34.923>view <00:22:35.382>transitions.

407
00:22:35.915 --> 00:22:40.575
<00:22:35.915>So, <00:22:36.090>um, <00:22:36.264>we <00:22:36.440>use <00:22:36.615>our <00:22:36.790>view <00:22:36.965>transitions <00:22:37.139>for <00:22:37.315>routing

408
00:22:41.075 --> 00:22:43.535
<00:22:41.075>or, <00:22:41.425>uh, <00:22:41.775>in <00:22:42.125>our <00:22:42.475>navigation,

409
00:22:43.915 --> 00:22:46.615
<00:22:43.915>but <00:22:44.148>you <00:22:44.381>can <00:22:44.615>also <00:22:44.848>use <00:22:45.081>view <00:22:45.315>transitions

410
00:22:46.675 --> 00:22:49.415
<00:22:46.675>to <00:22:46.955>create <00:22:47.235>cool <00:22:47.514>effects <00:22:47.794>within <00:22:48.075>lists,

411
00:22:49.415 --> 00:22:50.855
<00:22:49.415>for <00:22:49.674>example, <00:22:49.933>when <00:22:50.192>you <00:22:50.451>sort <00:22:50.711>them.

412
00:22:51.395 --> 00:22:52.935
<00:22:51.395>Um, <00:22:51.593>I <00:22:51.791>have <00:22:51.989>here <00:22:52.187>an <00:22:52.385>example <00:22:52.582>for <00:22:52.781>you.

413
00:22:52.995 --> 00:22:57.615
<00:22:52.995>So <00:22:53.122>when <00:22:53.249>I <00:22:53.376>sort <00:22:53.504>my <00:22:53.631>list, <00:22:53.758>I <00:22:53.885>have, <00:22:54.013>uh, <00:22:54.140>some <00:22:54.267>nice, <00:22:54.395>um,

414
00:22:57.855 --> 00:22:59.735
<00:22:57.855>examples <00:22:58.205>when, <00:22:58.555>when <00:22:58.905>the <00:22:59.255>internet

415
00:22:59.985 --> 00:23:01.575
<00:22:59.985>connection <00:23:00.264>would <00:23:00.544>be <00:23:00.824>a <00:23:01.104>bit <00:23:01.385>better.

416
00:23:01.995 --> 00:23:04.135
<00:23:01.995>Um, <00:23:02.228>but <00:23:02.461>you, <00:23:02.695>you <00:23:02.928>see <00:23:03.161>the <00:23:03.395>effect.

417
00:23:04.875 --> 00:23:07.895
<00:23:04.875>So <00:23:05.030>these <00:23:05.186>kind <00:23:05.341>of <00:23:05.497>animations <00:23:05.652>that <00:23:05.808>were <00:23:05.963>performed <00:23:06.119>just <00:23:06.275>now

418
00:23:08.515 --> 00:23:10.815
<00:23:08.515>are <00:23:08.795>also <00:23:09.075>made <00:23:09.355>with <00:23:09.635>view <00:23:09.915>transitions.

419
00:23:11.075 --> 00:23:13.135
<00:23:11.075>So <00:23:11.275>you <00:23:11.475>can <00:23:11.675>also <00:23:11.875>can <00:23:12.075>trigger <00:23:12.275>view <00:23:12.475>transition

420
00:23:13.455 --> 00:23:14.695
<00:23:13.455>manually <00:23:14.013>in <00:23:14.571>angular.

421
00:23:14.915 --> 00:23:18.175
<00:23:14.915>You <00:23:15.070>can <00:23:15.226>write <00:23:15.381>a <00:23:15.537>directive <00:23:15.692>that <00:23:15.848>triggers <00:23:16.003>the <00:23:16.159>view <00:23:16.315>transition.

422
00:23:18.265 --> 00:23:22.775
<00:23:18.265>There <00:23:18.405>are <00:23:18.545>also <00:23:18.685>some <00:23:18.825>caveats <00:23:18.965>in, <00:23:19.105>uh, <00:23:19.245>in, <00:23:19.385>um, <00:23:19.525>in <00:23:19.665>combination

423
00:23:22.775 --> 00:23:24.615
<00:23:22.775>with <00:23:23.055>the <00:23:23.335>change <00:23:23.615>detection <00:23:23.895>of <00:23:24.175>angular.

424
00:23:24.955 --> 00:23:28.375
<00:23:24.955>But <00:23:25.095>um, <00:23:25.235>it's <00:23:25.375>just <00:23:25.514>an <00:23:25.655>example <00:23:25.794>how <00:23:25.935>creative <00:23:26.074>you <00:23:26.215>can <00:23:26.355>be.

425
00:23:28.375 --> 00:23:33.015
<00:23:28.375>Another <00:23:28.550>example <00:23:28.725>could <00:23:28.900>also <00:23:29.075>be <00:23:29.250>such <00:23:29.425>cases, <00:23:29.600>uh, <00:23:29.775>sliders

426
00:23:33.435 --> 00:23:36.415
<00:23:33.435>or <00:23:33.715>accordions <00:23:33.995>are <00:23:34.274>also <00:23:34.554>great <00:23:34.835>examples.

427
00:23:36.465 --> 00:23:39.935
<00:23:36.465>Could <00:23:36.665>be <00:23:36.865>possible <00:23:37.064>to <00:23:37.264>animate <00:23:37.465>in <00:23:37.665>a <00:23:37.865>nice

428
00:23:39.935 --> 00:23:41.775
<00:23:39.935>and <00:23:40.215>fancy <00:23:40.495>way <00:23:40.774>with <00:23:41.054>new <00:23:41.335>transitions.

429
00:23:42.675 --> 00:23:44.735
<00:23:42.675>So <00:23:43.375>after <00:23:44.075>that,

430
00:23:45.965 --> 00:23:49.765
<00:23:45.965>I, <00:23:46.139>we <00:23:46.314>are <00:23:46.490>on <00:23:46.665>the <00:23:46.840>end <00:23:47.014>of <00:23:47.189>my <00:23:47.365>presentation.

431
00:23:50.325 --> 00:23:52.205
<00:23:50.325>I <00:23:50.605>hope <00:23:50.885>I <00:23:51.165>could <00:23:51.445>convince <00:23:51.725>you

432
00:23:52.225 --> 00:23:54.885
<00:23:52.225>to <00:23:52.458>use <00:23:52.691>future <00:23:52.925>transitions <00:23:53.158>in <00:23:53.391>your <00:23:53.625>projects.

433
00:23:55.105 --> 00:23:56.565
<00:23:55.105>Please <00:23:55.433>play <00:23:55.762>around <00:23:56.090>with <00:23:56.419>them

434
00:23:57.145 --> 00:24:00.005
<00:23:57.145>and, <00:23:57.320>um, <00:23:57.495>spread <00:23:57.670>the <00:23:57.845>word <00:23:58.020>view <00:23:58.195>transitions <00:23:58.370>in <00:23:58.545>the,

435
00:24:00.185 --> 00:24:01.725
<00:24:00.185>in <00:24:00.647>our <00:24:01.109>developer <00:24:01.571>community

436
00:24:01.755 --> 00:24:05.405
<00:24:01.755>because <00:24:01.930>I <00:24:02.105>think <00:24:02.280>future <00:24:02.455>transitions <00:24:02.630>are <00:24:02.805>really <00:24:02.980>cool, <00:24:03.155>feature

437
00:24:05.545 --> 00:24:07.805
<00:24:05.545>and <00:24:05.895>advancement <00:24:06.245>of <00:24:06.595>our <00:24:06.945>development

438
00:24:07.905 --> 00:24:10.605
<00:24:07.905>and <00:24:08.138>can <00:24:08.371>close <00:24:08.605>the <00:24:08.838>gap <00:24:09.071>between <00:24:09.305>mobile

439
00:24:10.905 --> 00:24:12.725
<00:24:10.905>and <00:24:11.254>native <00:24:11.605>development <00:24:11.955>even <00:24:12.305>more.

440
00:24:12.855 --> 00:24:14.485
<00:24:12.855>Thank <00:24:13.205>you <00:24:13.555>for <00:24:13.905>your <00:24:14.255>attention.