@Pginer-WMF @SGautam_WMF as I explore how the transitions are working and why they don't looks the same on desktop, it strikes me that these kind of transitions are a lot less common on desktop and I'm wondering if we should have them at all. Just to be clear, the transitions I'm referring to are when the whole view slides from right to left when the user is advancing and from left to right when the user is going back.

I noticed slide transitions on desktop is available on other parts too. For instance, clicking on any suggestion for translation and then discarding that suggestion again using (x) or even how dialog box appears when we attempt to delete an ongoing translation using the delete icon. In my opinion and ofcourse @Pginer-WMF feedback would be more appropriate here we can proceed with following.

1. Remove the slide transitions on desktop
2. Replace with immediate content changes
3. Keep the current mobile experience unchanged

My recommendation is to remove transitions between views on both mobile and desktop for now.

The current transitions on mobile don't follow a consistent notion of space:

In the example, when an article is selected to translate, the list of suggestions leaves the screen moving forward (i.e., to the right) while the new contents appear moving backward (from the right). For transitions to help build a sense of space, it seems more appropriate for the list to move to the left (back) and the new contents appear from the right (i.e. also moving towards the same direction: to the left). This helps the user brain to understand that both views were one next to the other as the viewport is adjusted to move forward.

The current transitions were created as part of the experimentation on the technical infrastructure. They are not part of the product specification (T243495). The designs in the specification only proposed transitions in a few cases where it was important to signal the relationship of certain elements. For example, when moving from selecting a sentence to editing it in the translation editor. However, those have not been implemented yet: T259512: Edit a sentence: Use transitions to provide continuity when entering and leaving the editor

Ideally, it would be great to have transitions that work well across platforms, so I think it may be better not to fragment the experience depending on the device. Especially considering there is a continuum of screen sizes to define which ones get a certain type of transition or not.

Currently, there is no general guidance on transitions in Codex. So I think there is an opportunity to collaborate with the Design-System-Team
to determine a standard approach we could follow.

@Pginer-WMF the transitions as seen in your video above are in a broken state. They have been broken and then fixed and should be fixed in production next week. My perception of them, when they work well, is that they do provide a clear indication of moving forward or backward in the workflow. Maybe you can try it out next week and then we talk about it.

My concern with desktop is the amount of motion on a big screen is dizzying. Wondering if there's a way to tone it down or make it softer while keeping some indication of forward/backward movement.

In T381434#10471068, @SBisson wrote:

@Pginer-WMF the transitions as seen in your video above are in a broken state. They have been broken and then fixed and should be fixed in production next week. My perception of them, when they work well, is that they do provide a clear indication of moving forward or backward in the workflow. Maybe you can try it out next week and then we talk about it.

My concern with desktop is the amount of motion on a big screen is dizzying. Wondering if there's a way to tone it down or make it softer while keeping some indication of forward/backward movement.

Thanks for the update, @SBisson. I'll re-check next week.
One approach I've used when prototyping to tone down similar transitions is not to show the whole trajectory. Showing only initial/final part of it and fading out/in. I'll explore some options.

Looking into this again, I realized that some of the problematic transitions indicated in the ticket would not take place on desktop due to the responsive adjustments from T284741.
I guess we can adjust the transitions to move in a consistent direction, and re-evaluate when T284741 is complete.

@Pginer-WMF with T284741 going in a different direction than expected (without dialog). We still have broken animations on larger screens (min-width: 1120px). We could disable the transitions in this context of try to fix it, with the understanding that it creates a lot of motion on large screens.

One way or another I think we should do something before the release. To me, it looks broken.

Change #1120911 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] Unified dashboard: Improve transitions between steps (routes)

https://gerrit.wikimedia.org/r/1120911

Change #1121640 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@master] Limit view transitions to mobile devices

https://gerrit.wikimedia.org/r/1121640

Change #1120911 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] Unified dashboard: Improve transitions between steps (routes)

Reason:

Abandoning in favor of I6e04a761d5b3da2a9f6ec99d17dcfa76baa5fa1c

https://gerrit.wikimedia.org/r/1120911

Change #1121640 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Limit view transitions to mobile devices

https://gerrit.wikimedia.org/r/1121640

Change #1122111 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20250224

https://gerrit.wikimedia.org/r/1122111

Change #1122111 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20250224

https://gerrit.wikimedia.org/r/1122111

@ngkountas Verified that the transition animation is smooth without rendering an empty space animation behaves consistently with the expected behavior in narrower screen views as seen in the gifs below. I will move this to sign-off. Thanks for all your work!

**Test Result - TestWiki*

Status: ✅ PASS
Environment: TestWiki
OS: macOS Sonoma 15.3.1
Browser: Chrome 133
Device: MacBook Air (Large Desktop View/Mobile)

Test Artifact(s):

https://test.wikipedia.org/w/index.php?title=Special:ContentTranslation&filter-type=automatic&filter-id=previous-edits&active-list=suggestions&from=es&to=en&unified-dashboard=true#/

Test Steps

Test Case: Ensure Smooth Page Transition Animation on Large Screens

1. Navigate to CX Unified Dashboard.
2. Ensure the screen is in large desktop view (where 'Your impact' and 'Need help translating?' are displayed on the right-hand side).
3. Click "New translation" (main CTA button).
4. ✅ AC1: Verify that the transition animation is smooth without rendering an empty space.

Desktop	Mobile- Landscape

5. ✅AC2: Verify that the animation behaves consistently with the expected behavior in narrower screen views.

Desktop	Mobile- Portrait