Page MenuHomePhabricator

Feed cards should animate in
Closed, ResolvedPublic

Description

Why are we doing this?

Cards on the Explore feed are appearing from the bottom up on the screen, which is at odds with a user's mental model that content is being added sequentially in reverse chronological order as they scroll down the feed.

Proposed solution

Cards should appear from top to bottom on the feed.

Steps to QA

Pre-conditions: So that progress of content loading is more easily observed
(i) Data connectivity should be slowed; and
(ii) the feed should be customized so that the shorter "Today" and "Randomizer" cards appear first.

  1. Clear the cache and completely exit from the app
  2. Re-launch the app. It is expected that the cards should load in the Explore feed from top to bottom.

Original task description

Google says[0] the second principle of Material design is meaningful motion. Instead of appearing instantly, cards should animate in when new ones are added so that when new cards are available it is obvious but not jarring. Note: cards are already animated off screen by swiping away.

[0] https://www.youtube.com/watch?v=iNI8IkBAmgs

Event Timeline

Change 417473 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Improve animation of incoming feed cards.

https://gerrit.wikimedia.org/r/417473

@RHo If you like, check out this patch ^ and tell me if the animations are closer to what you'd expect.

hey @Dbrant - I'm seeing some jankiness in that the feed is opening scrolled down already (so the extended app bar is gone):

Explore feed loading animation bug.gif (1×524 px, 1 MB)

Change 417473 abandoned by Dbrant:
WIP: Improve animation of incoming feed cards.

https://gerrit.wikimedia.org/r/417473

Change 418048 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Introduce custom animator for incoming feed cards.

https://gerrit.wikimedia.org/r/418048

Change 418048 merged by jenkins-bot:
[apps/android/wikipedia@master] Introduce custom animator for incoming feed cards.

https://gerrit.wikimedia.org/r/418048