1892535 - [toolbar redesign] Investigate how to add animations that help enhance the user's experience

Status: NEW

(Fenix :: Toolbar, task, P3)

Description

[Roger Yang [:royang]]

Attachment: Potential animation

During the redesign of the toolbar, it was difficult to make improvements to the animations that can be added to the address for enhanced user experience. As we are taking on this big refactor of the address bar, we should also keep the animations in mind as well.

Currently, when viewing the transitions between toolbar states, they look sudden and jumpy, we want to introduce animation transitions so that these kinds of experiences are perceived to be smooth rather than rough.

For example, I have attached a video that shows how smooth the transition can be when the user starts to type in the address bar, as compared to the current one. [This is just an example, not necessarily the final direction]

Comment 1

[Chris Peterson [:cpeterson]]

Setting toolbar redesign's follow-up work to priority P3 until we finish fixing our Release blockers.

Comment 2

[Mike a [:mavduevskiy]]

possible fix in 1889240 – the default animation was adjusted to remove fade out effect, that was causing glitches. should we ask the UX team to take a quick look? A full scale research and guidelines might be overkill for know, but this change might be a starting point (we might invest time into developing custom Transition for future improvements)

what's the origin of the provided animation? was there any resources provided by the UX team?

Comment 3

[Roger Yang [:royang]]

Yes, this issue is coming from the design team. I'll let Aarjav answer the questions here.

Comment 4

[Aarjav [:aarjav]]

As explained in the description above, this is a ticket to keep in mind that we will want to incorporate animations in the toolbar and address bar as needed. Any issues with code and complexity with code should not cause concern for not implementing animations. When refactoring, it needs to be kept in mind that we might want to bring animations to the toolbar.

The animation shown above is only an example animation.