1776707 - Add/update transitions for MR new user onboarding 50-50 template

Status: NEW

(Firefox :: Messaging System, enhancement, P5)

Description

[Meg Viar [:mviar]]

Once we receive guidance from UX, update the transitions in the MR new user onboarding 50-50 template. These include:

• Transition from side-by-side layout to stacked when reducing screen size
• Entrance / exit of logo, buttons, and screen text
• Progress bar advancement

Comment 1

[Meg Viar [:mviar]]

Design is exploring transitions for the modal content and altering the existing noodle transitions. For the MR template, the noodle background images would be replaced with "fuzzy" circles (like this example: https://svgur.com/s/j4R). We'd likely need to alter the noodle size and position of the noodles for the MR template as well.

The main content elements should fade in from the left (like in this example: http://tpcg.io/_WJYXCN).

Comment 2

[Gabrielle Lussier [:glussier]]

Attachment: Link to transition SVGs

Comment 3

[Gabrielle Lussier [:glussier]]

Attachment: Link to Figma prototypes

Comment 4

[Meg Viar [:mviar]]

Accessibility team reviewed the preliminary designs and their only concern was ensuring that we "make sure the animation respects the prefers reduced motion setting so users who have the preference set get an instantaneous transition or no transition instead of an animation." We can likely use our current approach to fading elements in and out instead of moving them for users who prefer reduced motion.

Comment 5

[Ania]

Meg, thank you for the update. For future QA, do we currently respect all of these conditions when detecting the prefers-reduced-motion?

• In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
• In Window 7 [& 8]: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
• In macOS: System Preferences > Accessibility > Display > Reduce motion.
• In GTK/Gnome, if gtk-enable-animations is set to false. This is configurable via GNOME Tweaks (Appearance tab or General tab, depending on version).

Comment 6

[Meg Viar [:mviar]]

Ania, yes it respects those conditions. We use the prefers-reduced-motion media query to handle these conditions. See the list of respected user preferences by OS here.

Comment 7

[Ania]

Thank you so much for confirming and pointing me to the docs!

Comment 8

[Punam Dahiya [:pdahiya]]

Link to final transitions in figma https://www.figma.com/file/2TrMkNefxzhMCXjUqM8KIy/MR1-2022-Onboarding?node-id=4262%3A84258

Comment 10

[Ania]

Hi team!
A quick recap of what we discussed today when trying to narrow down the scope of this ticket:

For 106, we're going to go for the least invasive change in transitions behavior

1. We will use reduced motion transitions for all* users.
2. We will use fade in/out transition for the left-hand image, transition speed will be the same as of the content on the right.

We still need to figure out the speed of transitions from card to card, and how to approach it. I'll follow up async on slack to start tackling this.

We will keep two items of work for 107
3. Investigate image and content transition via fade to left.
It's safer to invest in this work after the holdback study is done we remove the pre-106 transitions onboarding. Trying to introduce new transitions that will affect all the layouts at

4. Background transitions with color gradients
   This is a nice-to-have, and not critical for 107.

I'll follow up with a separate ticket with 107 as a target release.

QA Impact
We will need to test that #1 didn't break pre-106 about:welcome and spotlight transitions, as the codebase is shared and any changes we make will impact transitions both layouts.

CC'ing Marius and Simona to share the info.

Comment 11

[Marius Coman [:mcoman], Ecosystem QA]

Hi, Ania! Thanks for the heads-up! The existing "about:welcome" and spotlight transitions will be also covered in our Firefox Beta 105 regression testing.