We'll probably have to do T267706: Add a link in VE: Use a permanent context instead of VE's built-in context if we want these animations. The engineers discussed this in our meeting yesterday; we've identified this as a potential candidate for something to do after the initial release. cc @RHo and @MMiller_WMF

In T278486#6947078, @kostajh wrote:

We'll probably have to do T267706: Add a link in VE: Use a permanent context instead of VE's built-in context if we want these animations. The engineers discussed this in our meeting yesterday; we've identified this as a potential candidate for something to do after the initial release. cc @RHo and @MMiller_WMF

Hi @kostajh - is there some other animation that is feasible in the interim? I am thinking something like the suggestion fading out and the next one fading in instead of sliding in on mobile.

In T278486#6948667, @RHo wrote:

In T278486#6947078, @kostajh wrote:

We'll probably have to do T267706: Add a link in VE: Use a permanent context instead of VE's built-in context if we want these animations. The engineers discussed this in our meeting yesterday; we've identified this as a potential candidate for something to do after the initial release. cc @RHo and @MMiller_WMF

Hi @kostajh - is there some other animation that is feasible in the interim? I am thinking something like the suggestion fading out and the next one fading in instead of sliding in on mobile.

Now that I'm thinking about this more, I believe we could do the slide left / right without T267706: Add a link in VE: Use a permanent context instead of VE's built-in context, if I understand the proposal correctly. What we can't do is show the contents of two link inspector widgets at once, since they are only rendered one at a time. Our current mobile experience shows the link inspector animating up from the bottom, so I think we could implement the slide left/right for the previous / next buttons.

In T278486#6952548, @kostajh wrote:

In T278486#6948667, @RHo wrote:

In T278486#6947078, @kostajh wrote:

We'll probably have to do T267706: Add a link in VE: Use a permanent context instead of VE's built-in context if we want these animations. The engineers discussed this in our meeting yesterday; we've identified this as a potential candidate for something to do after the initial release. cc @RHo and @MMiller_WMF

Hi @kostajh - is there some other animation that is feasible in the interim? I am thinking something like the suggestion fading out and the next one fading in instead of sliding in on mobile.

Now that I'm thinking about this more, I believe we could do the slide left / right without T267706: Add a link in VE: Use a permanent context instead of VE's built-in context, if I understand the proposal correctly. What we can't do is show the contents of two link inspector widgets at once, since they are only rendered one at a time. Our current mobile experience shows the link inspector animating up from the bottom, so I think we could implement the slide left/right for the previous / next buttons.

Hi @Kosta - that sounds great if the mobile animation can be done. I've added an animation example for the mobile version to help clarify the behaviour.
You can try the live prototype here (tap "Next", then the back chevron "<"):
https://www.figma.com/proto/2SONd8P1tsexIB5coMOp8h/Structured-tasks-v1.0?node-id=1574%3A66383&viewport=289%2C-8463%2C0.35500138998031616&scaling=min-zoom&page-id=181%3A65

Or here's an animated gif (open fullscreen to view in phab):

Currently on desktop, the scrolling is done via VE's scrollSelectionIntoView which happens when the selection changes. In the desktop prototype, the scroll occurs before the selection is applied, so I think we would need to manually scroll to the next annotation view then select the next suggestion.

Change 699282 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add a link: link inspector animations for mobile + cleanup

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

With latest changes:

In T278486#7150103, @mewoph wrote:

With latest changes:

@RHo does that look good to you?

In T278486#7150178, @kostajh wrote:

In T278486#7150103, @mewoph wrote:

With latest changes:

@RHo does that look good to you?

Is there still animation to scroll the article area to the next link missing? I'm missing that to highlight where the 'active' link suggestion is. I am particularly talking about the moment in the demo when the user selects "Yes" on indíani and it auto-advances to žlázy.

Hi @RHo — would it be ok for mobile to have the same sequence of interaction as desktop?

To clarify, here are the sequences (as I gather them) from your prototypes:

Desktop

1. Click Next
2. Scroll to recommendation in the article
3. Link inspector for the next recommendation is shown

Mobile

1. Click Next
2. Link inspector for the next recommendation is shown
3. Scroll to recommendation in the article

Unfortunately with the current setup, to achieve the sequence described here on mobile would require a fairly significant reworking of our code (since this would require us to "peek" the recommendation content or to show its content without selecting the corresponding annotation).

Here's what the flow looks like on mobile w/the same sequence as desktop.

RTL

In T278486#7151939, @mewoph wrote:

Hi @RHo — would it be ok for mobile to have the same sequence of interaction as desktop?

To clarify, here are the sequences (as I gather them) from your prototypes:

Desktop

1. Click Next
2. Scroll to recommendation in the article
3. Link inspector for the next recommendation is shown

Mobile

1. Click Next
2. Link inspector for the next recommendation is shown
3. Scroll to recommendation in the article

Unfortunately with the current setup, to achieve the sequence described here on mobile would require a fairly significant reworking of our code (since this would require us to "peek" the recommendation content or to show its content without selecting the corresponding annotation).

Here's what the flow looks like on mobile w/the same sequence as desktop.

Thanks @mewoph - yes, having Mobile with the same sequence as Desktop (with link inspector animation last) works well.

@mewoph on Firefox, there's an empty-ish link inspector that appears on page load at the top left

@kostajh Thanks for pointing this out. I mistakenly removed showFirstRecommendation implementation for desktop (which fades in the link inspector when it's positioned).

Animation when buttons are in 2 lines:

In T278486#7175806, @mewoph wrote:

Animation when buttons are in 2 lines:

Thanks for fixing that @mewoph! Looks good to me.

@RHo, I can't recall what our spec was, but do we want the inspector to auto advance when the user has toggled Yes/No? For example, the user taps Yes for the first recommendation, then goes back and taps Yes so both Yes and No are deselected. To me, it would make sense to *not* auto advance in that situation since it wasn't an explicit Yes/No action (and there is not a "Skip"/"Unsure" button).

In T278486#7177180, @kostajh wrote:

In T278486#7175806, @mewoph wrote:

Animation when buttons are in 2 lines:

Thanks for fixing that @mewoph! Looks good to me.

---

@RHo, I can't recall what our spec was, but do we want the inspector to auto advance when the user has toggled Yes/No? For example, the user taps Yes for the first recommendation, then goes back and taps Yes so both Yes and No are deselected. To me, it would make sense to *not* auto advance in that situation since it wasn't an explicit Yes/No action (and there is not a "Skip"/"Unsure" button).

Hi @kostajh - yes that is correct. The spec calls for auto-advance when on selection only, so the deselection action would not trigger auto-advance.

In T278486#7177186, @RHo wrote:

In T278486#7177180, @kostajh wrote:

In T278486#7175806, @mewoph wrote:

Animation when buttons are in 2 lines:

Thanks for fixing that @mewoph! Looks good to me.

---

@RHo, I can't recall what our spec was, but do we want the inspector to auto advance when the user has toggled Yes/No? For example, the user taps Yes for the first recommendation, then goes back and taps Yes so both Yes and No are deselected. To me, it would make sense to *not* auto advance in that situation since it wasn't an explicit Yes/No action (and there is not a "Skip"/"Unsure" button).

Hi @kostajh - yes that is correct. The spec calls for auto-advance when on selection only, so the deselection action would not trigger auto-advance.

Ah, already filed as T284230: Add a link: de-selecting Yes/No should not auto-advance (mobile) :)

Change 699282 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add a link: link inspector animations for mobile + cleanup

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