search

mozilla-mobile / fenix

⚠️ Fenix (Firefox for Android) moved to a new repository. It is now developed and maintained as part of: https://github.com/mozilla-mobile/firefox-android
https://github.com/mozilla-mobile/firefox-android
Mozilla Public License 2.0
6.47k stars 1.27k forks source link

Animation: tab switching #1289

Closed vesta0 closed 4 years ago

vesta0 commented 5 years ago

Pulling up Amy's first comment:

Tab switching is the same as returning to home and opening an existing tab. When on a website, the user taps on the home icon that takes them to the homescreen where they tap on an already opened tab to switch to it. Let me know if you have any questions.

Opening an existing tab from the home screen - Transition duration 120ms

• Apply Android ripple overlay on release of pressed state on tab.https://github.com/mozilla-mobile/fenix/actions

• After ripple animation, tab moves up and simultaneously fades out to 0% opacity. • Browser chrome and website screen moves up and simultaneously fades in to 100% opacity.

Closing a tab - Transition duration 120ms

• Animation is reversed (website screen slides down and fades out, tab slides down and fades in).

Animation reference: https://drive.google.com/file/d/1gg-tCqAKrI08ANVpekGmnltCqvS0o6RS/view?usp=sharing

Open Close Tab mp4

Original post: UX designs: #167

┆Issue is synchronized with this Jira Task

AmyYLee commented 5 years ago

Hi,

Tab switching is the same as returning to home and opening an existing tab. When on a website, the user taps on the home icon that takes them to the homescreen where they tap on an already opened tab to switch to it. Let me know if you have any questions.

  1. Opening an existing tab from the home screen - Transition duration 120ms

• Apply Android ripple overlay on release of pressed state on tab. • After ripple animation, tab moves up and simultaneously fades out to 0% opacity. • Browser chrome and website screen moves up and simultaneously fades in to 100% opacity.

  1. Closing a tab - Transition duration 120ms

• Animation is reversed (website screen slides down and fades out, tab slides down and fades in).

Animation reference: https://drive.google.com/file/d/1gg-tCqAKrI08ANVpekGmnltCqvS0o6RS/view?usp=sharing

vesta0 commented 5 years ago

@AmyYLee is this ready for eng or being re-evaluated?

vesta0 commented 5 years ago

@lime124 do we still need to do this?

AmyYLee commented 5 years ago

@vesta0 @lime124 Yes this is still relevant.

topotropic commented 4 years ago

@AmyYLee can we close this? Thanks!

AmyYLee commented 4 years ago

@topotropic Yes! I'll close this.