# Bug 3067: Transitions when emoji or comments update

- Status: closed
- Project: Zero
- Creator: @aboodman
- Assignee: @arv
- Labels: alpha-must, zbugs
- Created: 2024-10-22T00:10:40Z
- Modified: 2024-12-12T03:03:42Z
- Reactions: ❤️ ×1 (alexhking) · 😃 ×2 (alexhking, cesara) · 😶‍🌫️ ×1 (alexhking) · 🤚 ×1 (alexhking) · 🫠 ×1 (alexhking) · 🫥 ×1 (alexhking)
- URL: https://bugs.rocicorp.dev/p/zero/issue/3067

## Description

We want to make it a little celebration when something happens due to realtime collab, particularly for alpha.

Concrete things to solve:

1. If you're looking at an issue or comment when it receives a reaction, it should change purposefully and happily not accidentally. It should also be visible how it changed (there should be some temporary UI that fades away that says "Erik reacted" or whatever).
2. If you're looking at an issue and a comment gets added, it should highlight in such a way that it looks purposeful.
3. If you're looking at issue 1 and issue 2 changes, you should get a notification somwhere in the UI this happened -- i.e., a notification tray.
4. Ideally issue edits like changing assignee, status, everything should also highlight this way. anything in the UI should light up in a consistent way when changed, with attribution. But the issue edits are much less common so this is less important.

I think the first two are most important for alpha because people will generally be looking at a single issue (the launch announce).

## Comments (8)

### @aboodman — 2024-10-22T00:11:00Z

Assigned to Alex for design.

### @alexhking — 2024-10-22T00:24:35Z

on it ✨

Reactions: ❤️ ×1 (aboodman)

### @alexhking — 2024-11-15T15:45:58Z

@aboodman Here is a codepen I made testing a cool transition effect. Let me know what you think

https://codepen.io/alexanderking/pen/MWNRgLa

### @alexhking — 2024-11-15T16:12:47Z

👆 This animation is showing what it would look like to interact with existing emojis (adding or removing your +1 to that specific emoji) however we could auto-run this animation after selection from the emoji palette. For complete removal (in the case where there is only 1 emoji instance and it is tapped again to remove) we can have a css animation that transitions to scale(0) before removing it.

### @arv — 2024-11-25T20:38:59Z

Let me work on getting a js callback when a emoji reaction is added. We can then trigger a web animation or css animation based on that.

### @aboodman — 2024-12-10T20:49:08Z

This is still pretty flaky. I often see the toast pop up when navigating into a detail.

### @aboodman — 2024-12-12T02:58:43Z

Here is an example of the flake I see live on production:

![flake](https://i.imgur.com/JeECmNk.mp4)

### @aboodman — 2024-12-12T03:03:38Z

Closing in favor of: https://bugs.rocicorp.dev/issue/3225