With proton multistage design, we will be updating first screen to have 1/3 + 2/3 layout, scope of this bug is to investigate animations with noodles shown in 1/3 layout and as background of 2/3 layout

Ryan shared some designs a month ago to check with accessibility. Seems like mostly staggered fades with some motion/slides/turns, so reduced motion could probably keep the former. I'll try this out with react hooks.

Looks like it might work? At least for transitioning in…

Use hooks to insert transition-{in,out} class when adding and removing screens. Specify desired in/out styles to transition from/to. Also flex/push buttons/steps to the bottom to be the same position on the latter screens.

The patch here updates FeatureManifest.js from bug 1706369, so if that is not uplifted, a new beta patch here will be needed.

Could you verify this so we can request uplift?

1. open about:welcome
2. see transitions in and out for each screen

Setting OS "reduce motion" should result in only fades and no movement.

I have verified this enhancement and I can confirm that on Windows 10 x64, Windows 8.1 x64, macOS 10.15, and Linux Mint 20, animations are triggered each time an "about:welcome" screen is opened or closed. Also, I can confirm that if the "reduce motion" OS setting is active, results in fades only and no movement.

However, on Windows 7 this enhancement may have caused a regression (see " and "Not now" buttons from the second screen of the "about:welcome" page are wrongly displayed in the bottom part of the white modal" target="_blank">bug 1709805). More exactly the buttons from the second screen of the "about:welcome" page are now displayed in the bottom part of the white modal (on Windows 7 there are no navigation bullets) and a big empty space results between them and the text description.

Verified using the latest Firefox Nightly (90.0a1 - Build ID: 20210505215208).

Comment on attachment 9220009 [details]
Bug 1698204 - Animate proton about:welcome with fades and motion if not reduce-motion r?pdahiya

Beta/Release Uplift Approval Request

• User impact if declined: Proton/MR1 about:welcome page has no transitions potentially attracting less attention and engagement
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Comment 10
• List of other uplifts needed: Regressed " and "Not now" buttons from the second screen of the "about:welcome" page are wrongly displayed in the bottom part of the white modal" target="_blank">bug 1709805
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Primarily a bunch of little CSS changes as we specify the enter/exit positions/transitions for each element on each screen. These have been signed off by PM, UX, QA.
• String changes made/needed: none

Note that MR1 uplifts pas the beta extension period need PM approval, thanks.

Shilpa, can you additionally confirm this for uplift for comment 13? Romain asked for uplift in bug 1706478 comment 4 and this fix here also fixes that bug. And comment 12 noted this has been signed off by PM, UX, QA too.

Sounds good, let's uplift this one.

Comment on attachment 9220009 [details]
Bug 1698204 - Animate proton about:welcome with fades and motion if not reduce-motion r?pdahiya

Approved for 89 beta 11, thanks.

I have verified this enhancement and I can confirm that animations are triggered each time an "about:welcome" screen is opened or closed. Also, I can confirm that if the "reduce motion" OS setting is active, results in fades only and no movement.
Verified using the latest Firefox Beta (89.0b11 - Build ID: 20210511190154) installed on Windows 10 x64, macOS 10.15, and Linux Mint 20 x64.