element-hq / element-hq/element-android

[SDK] Transition animation in and out of spaces

Open
#8,955 0 comments 0 reactions 0 assignees View on GitHub
matrix-sdk
Dominant language
Kotlin
Stars
3.7k
Forks
917
Avg merge
8d 20h
Merged PRs (30d)
1

Description

### Description

My interactions have been based around Android, but concept should be generally applicable to the alternate viewports.
My idea is:
I want a transition into the spaces and out of the spaces to provide a user a clear feeling that they are on a new page that contains the space's contents. When users click on the space, the transition plays. When the user hits the back button the transition plays in reverse.

I worked with a couple of users testing the app's interface for practice with usability studies. A commonality was having difficulty understanding where they were within the app when inside spaces they organized and when they were on the main page.
The main page has the same feel as the spaces, and the current transition is a very fast fade that feels like a filter being applied rather than a space. I think this would give the feeling of movement for a mental model and lean into the used terminology like space.

Concept:
A quick transition like an individual wave from a water droplet. No ripple but a transition coming from the space button on the UI.

A close example of the concept, this would be as the space is exited. This transition in reverse would be the entering animation.

https://github.com/user-attachments/assets/fd953790-fc4e-49eb-9ea4-836e577a6088

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.