YouTube for Android testing a video progress Bar

YouTube for Android testing a video progress Bar YouTube rolled out a big redesign across its mobile apps and the web.

[{"selector":"#anim-5e4af32a-25e9-4ec6-908c-2f16eaf6acb3 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-702baf01-9510-4ac4-b3c7-52ce4567dba1","keyframes":{"opacity":[1,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-c6b1341b-6227-4d46-adb5-8d0bd1c6b1a5","keyframes":{"transform":["scale(3)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-2f0f9cae-1f17-4136-a52b-23f80bd50aec","keyframes":{"opacity":[1,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-453701b2-7365-4195-a9ff-e05c8dc988dd","keyframes":{"transform":["scale(3)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] YouTube for Android is now testing a more subtle video progress bar that isn’t red all the time.

[{"selector":"#anim-683a570e-2a9e-433d-8252-59cea8a2bf49 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.812499744007886%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-4d8419b7-03ae-4557-acea-bbd6b005baf8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6f546243-4a8b-4aab-afe1-c0487f8f2053","keyframes":{"transform":["translate3d(108.26770%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-742d5c0c-fab3-48a1-8af9-5c04e9245a21","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-28e27c58-12f7-446e-a61b-1fec6b48b663","keyframes":{"transform":["translate3d(114.97796%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] In those circumstances, YouTube also doesn’t note how much of a video has loaded.

[{"selector":"#anim-adcaf355-fa6c-45fa-8d76-fc6925e06e3b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-3.552713678800501e-15%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-a4484d8b-869b-4873-b126-305342e70820","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-608a4850-ed38-4a85-98f9-4a1b11c7bdae","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] Interacting with the scrubber or tapping to bring up controls changes it back to the previous behavior

[{"selector":"#anim-f93c51a4-c791-432c-8a8a-c00b46926000","keyframes":{"transform":["translate3d(143.30707%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-88d131e1-5289-4f6d-9324-7903f08eea1d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a5546196-64bc-4ad6-adb8-23301244de24","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-e9dbb6a9-6e14-4150-bc4c-d6894daf21de","keyframes":{"transform":["translate3d(157.99086%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-63061bf2-8b69-48cf-8526-514aa188d3ef","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c5093d8c-1f36-4618-8900-917cd01ce092","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-a6b50dde-1d29-4e0a-a4b9-f2321c4795d0 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-12.499999772451451%, 0, 0) translate(-25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] This helps the UI fade away, which is something that YouTube has been working toward as seen with Ambient mode.

[{"selector":"#anim-a44c893f-20a7-475d-99bd-0cd98ca32f53 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-a96faf55-ba69-463e-86bf-f2945837d22a","keyframes":{"transform":["translate3d(-146.52173%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-21c1dbc0-0723-42df-9971-363088ee4df5","keyframes":{"transform":["rotateZ(-180deg)","rotateZ(0deg)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] [{"selector":"#anim-a2f06251-a4c4-4eb6-91a9-08edf05d27d4","keyframes":{"transform":["translate3d(-136.61418%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-4f6624c3-ff0f-4c73-a3d6-4907fd9d38e5","keyframes":{"transform":["rotateZ(-180deg)","rotateZ(0deg)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] Outside of the video player, red is still used in the main feed and everywhere else

[{"selector":"#anim-fd7b930f-7c03-412a-a106-6d74a794b046 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-3.552713678800501e-15%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-a47519bb-4f48-4289-a69c-bf6c7cdc9652","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-d2b6c2fa-dda2-45fa-b9db-01b27fb3d338","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-119d1944-0669-4633-b986-d68b03105e97","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-acdbde83-c598-4b00-acca-a03f6498fbc2","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] So the change is clearly targeted at the watching experience.

[{"selector":"#anim-fc4e0c0b-a098-4c3c-be0f-46b2aab640d0 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-3.552713678800501e-15%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-49744b64-08c7-49c4-81cc-273f4b305600","keyframes":{"opacity":[1,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-8e43d5d7-e2f9-4b49-af58-c10f4f19aade","keyframes":{"transform":["scale(3)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-945a8b54-1b51-4349-a65a-beb2fabc1297","keyframes":{"opacity":[1,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-6a62a2ce-fd45-4564-a743-8c240391f843","keyframes":{"transform":["scale(3)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] As YouTube’s accent color, red is definitely not going away.

[{"selector":"#anim-558ab0d6-9001-4609-ad5d-2e90ea5cbcc4 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.249999886225726%, 0, 0) translate(-25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-f8222a6e-23a7-4c4a-b003-0d23d3d03499","keyframes":{"transform":["scale(1)","scale(1.5)","scale(0.95)","scale(1)"],"offset":[0,0.33,0.66,1]},"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-b5d4d7b7-cb37-4866-82b6-40e8fa58033e","keyframes":{"transform":["scale(1)","scale(1.5)","scale(0.95)","scale(1)"],"offset":[0,0.33,0.66,1]},"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] Meanwhile, the usual red progress bar remains when using a light theme on the same device. It’s not clear if that’s the intended behavior

[{"selector":"#anim-bceb2c8d-4530-497d-8b71-c3d90e96b16e [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(20.738636175207517%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-dc85efec-69f1-42e1-bf7e-7249bc0ca14c","keyframes":{"transform":["rotate(-540deg) scale(0.1)","none"],"opacity":[0,1]},"delay":0,"duration":1000,"fill":"both","iterations":1}] [{"selector":"#anim-1f2cf91e-3cbe-44a9-bf39-06ab8a13bcc8","keyframes":{"transform":["rotate(-540deg) scale(0.1)","none"],"opacity":[0,1]},"delay":0,"duration":1000,"fill":"both","iterations":1}] This change is not widely rolled out, and only live on that one phone even across multiple device sign-ins.