Add some animations

[Linerly]

Element Web doesn't have any animations to the UI, WhatsApp Web and Discord for example has animations for the UI

It would be nice to add some animations to:

• Popups (pop-up animation)
• Dialogs (expand animation for the dialog, and transparency transition for the background, like Discord's; a drop-down animation; …)
• Space panel (when expanding, transition animation)
• Side panel (when opening/closing it, transition animation; …)
• Loading screen (once loaded: fade animation, like Discord's; zoom animation, like WhatsApp's)
• Pinned widget(s) (drops from the top of the room when someone pins a widget)
• Message/event jump (smooth jump transition, not an immediate jump)
• Verification icons (animated checkmark)
• Dropdowns (fade animation; drop-down animation; …)
• Context menus (Element Web doesn't have a custom context menu — Discord/WhatsApp Web does have a custom context menu)
• The call screen (ripple animation in the avatar background, like Discord's)
• Theme changes (color transition animation)
• Avatars(?) (it appears instantly after loading, add fade animation when it's done loading; use BlurHash animation — like when the images are loading in the timeline — when loading the avatar) Most of the time, room avatars load instantly, so I guess this isn't needed, maybe a fade will be enough
• New messages in the timeline (instead of appearing instantly, scroll the timeline up a bit and add a transparency fade animation to the new message — like Discord's Android app, for example)
• …

[dbkr]

I'm not sure what's gone wrong with filing this issue, but if you use the templates it should help a lot. Assigning to @Linerly if you could make it sensible.

[Linerly]

Edited to make it more clear