step-bar

[ooooorchid]

-We should animate scroll transition and step transition so that the change is clear.

Step Transition:
https://github.com/user-attachments/assets/c8d25b76-c490-40ba-a3ae-bd13e37b188c
(CSS Transitions: Ease-In 300ms)

Scroll Transition:
https://github.com/user-attachments/assets/65172dd1-a3e9-419b-bbf9-11e653717544
(CSS Transitions: Ease-In 300ms)

-remove focus unless activated by keyboard

[ddfridley]

@ooooorchid In the scroll transition, I am not clear what is going on.
I think Step 6 is active, and the user is clicking on the right arrow button to see what is to the right of step 6?

I think you are asking for the CSS transition to be 'linear', and the step text to smoothly move to the left over 300ms?

After the scroll, I think that Step 6: should remain active/highlighted - as the scroll action is not changing the step-panel shown below. I don't think we want to change the panel shown below, until the user clicks on some other step choice.

For other transitions and things we use 500ms, would that be ok? (or what is the background on the 300ms value, should we change other things to that?)

[ooooorchid]

In the video example, user goes from Step 1 to Step 2. I'm merely showing the Ease-In 300ms; right now the transition is too rigid. Same thing with the scroll; transition should "Scroll through", not seemingly jump over. This was also set to Ease-In 300ms.

I'd stick to 300ms unless otherwise noted. Per Material guidelines, 300ms is a solid starting point.