Skip to content

Add enter animation to new timeline events - #7686

Open
jmartinesp wants to merge 1 commit into
developfrom
feature/add-enter-animation-for-new-timeline-events
Open

Add enter animation to new timeline events#7686
jmartinesp wants to merge 1 commit into
developfrom
feature/add-enter-animation-for-new-timeline-events

Conversation

@jmartinesp

@jmartinesp jmartinesp commented Sep 10, 2026

Copy link
Copy Markdown
Member

Content

Add the WithEnterAnimation wrapper to add an slide-up + fade in animation to timeline events with SYNC or LOCAL origin so new items either coming from sync or sent by the current users animate when added to the timeline. Other items will work the same.

Motivation and context

Implement #6966.

FWIW, I tried a more thorough implementation with Modifier.animateItem() but there were lots of weird animations, as we had before:

  • Grouped events overlapping with any events above them when being expanded.
  • When you send several items in a row, the latest event with the 'sent' indicator will collapse with an animation, and the new item being added will be animating from what it looks like the middle of that event, which makes them overlap in an awkward way.
  • Probably more I haven't noticed.

So I decided to drop that implementation and do something simpler.

Screenshots / GIFs

Screen_recording_20260910_145639.mp4

Tests

Test sending and receiving new events in the timeline, as well as redacting them or paginating.

Tested devices

  • Physical
  • Emulator
  • OS version(s): 15

Checklist

  • I am aware of the etiquette.
  • This PR was made with the help of AI:
    • Yes. In this case, please request a review by Copilot.
    • No.
  • Changes have been tested on an Android device or Android emulator with API 24
  • UI change has been tested on both light and dark themes
  • Accessibility has been taken into account. See https://github.com/element-hq/element-x-android/blob/develop/CONTRIBUTING.md#accessibility
  • Pull request is based on the develop branch
  • Pull request title will be used in the release note, it clearly defines what will change for the user
  • Pull request includes screenshots or videos if containing UI changes
  • You've made a self review of your PR

Add the `WithEnterAnimation` wrapper to add an slide-up + fade in animation to timeline events with SYNC or LOCAL origin so new items either coming from sync or sent by the current users animate.
@jmartinesp
jmartinesp requested a review from a team as a code owner September 10, 2026 12:58
@jmartinesp
jmartinesp requested review from ganfra and removed request for a team September 10, 2026 12:58
@jmartinesp jmartinesp added the PR-Change For updates to an existing feature label Sep 10, 2026
@github-actions

Copy link
Copy Markdown
Contributor

📱 Scan the QR code below to install the build (arm64 only) for this PR.
QR code
If you can't scan the QR code you can install the build via this link: https://i.diawi.com/PAKLj2

@sonarqubecloud

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
20.4% Duplication on New Code (required ≤ 10%)

See analysis details on SonarQube Cloud

@codecov

codecov Bot commented Sep 10, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 72.34043% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 80.90%. Comparing base (c623105) to head (4e47b77).
⚠️ Report is 2 commits behind head on develop.

Files with missing lines Patch % Lines
...ssages/impl/timeline/components/TimelineItemRow.kt 72.34% 9 Missing and 4 partials ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           develop    #7686      +/-   ##
===========================================
- Coverage    80.91%   80.90%   -0.02%     
===========================================
  Files         2780     2780              
  Lines        81899    81944      +45     
  Branches     11284    11289       +5     
===========================================
+ Hits         66265    66293      +28     
- Misses       11290    11299       +9     
- Partials      4344     4352       +8     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@bxdxnn bxdxnn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Funny, I've also started working on it recently and was able to get a smooth animation for the entire timeline instead of just a fade-in for the new message. It required some refactoring instead of just putting the row in a box, could you please take a look?
#7688

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR-Change For updates to an existing feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants