🐛 Bug Report: Animations should be a lot quicker #221

Closed
opened 2025-10-07 00:06:23 +03:00 by OVERLORD · 8 comments
Owner

Originally created by @ItalyPaleAle on GitHub.

Originally assigned to: @kmendell on GitHub.

Reproduction steps

Animations were introduced in a recent release, but they tend to be relatively slow, up to 500ms.

While they are nice, slow animations artificially slow down the UX and make the app feel slower. This was also covered in a recent Syntax episode.

Ideally all animations should be quick, 100 or 200ms at most.

Expected behavior

Animations should be 200ms or faster

Actual Behavior

Animations are slow, up to 500ms

Version and Environment

main branch

Log Output

No response

Originally created by @ItalyPaleAle on GitHub. Originally assigned to: @kmendell on GitHub. ### Reproduction steps Animations were introduced in a recent release, but they tend to be relatively slow, up to 500ms. While they are nice, slow animations artificially slow down the UX and make the app feel slower. This was also covered in a [recent Syntax episode](https://youtu.be/nxzVZ7FYdwE?t=360&si=hj-GyZR8yaJY6uge). Ideally all animations should be quick, 100 or 200ms at most. ### Expected behavior Animations should be 200ms or faster ### Actual Behavior Animations are slow, up to 500ms ### Version and Environment main branch ### Log Output _No response_
OVERLORD added the bug label 2025-10-07 00:06:23 +03:00
Author
Owner

@kmendell commented on GitHub:

I set it to a max of 300ms here this should speed up the animations d534fad1cf

@kmendell commented on GitHub: I set it to a max of 300ms here this should speed up the animations d534fad1cf4fe16bfd94e6ec2ccdc83864c70dd8
Author
Owner

@kmendell commented on GitHub:

Ill work on this.

@kmendell commented on GitHub: Ill work on this.
Author
Owner

@mitchplze commented on GitHub:

Not sure if you saw but disabling animations altogether is possible with DISABLE_ANIMATIONS=true (or UI setting) as a workaround.

@mitchplze commented on GitHub: Not sure if you saw but [disabling animations](https://pocket-id.org/docs/configuration/environment-variables#overriding-the-ui-configuration) altogether is possible with `DISABLE_ANIMATIONS=true` (or UI setting) as a workaround.
Author
Owner

@ItalyPaleAle commented on GitHub:

Yes, I disabled animations in my setup. This still remains as a bug IMHO.

@ItalyPaleAle commented on GitHub: Yes, I disabled animations in my setup. This still remains as a bug IMHO.
Author
Owner

@kmendell commented on GitHub:

@ItalyPaleAle The timing is set to 150ms with a delay of 50ms, is there a certain spot you are seeing this take up to 500ms?

@kmendell commented on GitHub: @ItalyPaleAle The timing is set to 150ms with a delay of 50ms, is there a certain spot you are seeing this take up to 500ms?
Author
Owner

@kmendell commented on GitHub:

I did 300 over 200 as 200 was almost instant, 300 is still fast and still looks decent.

@kmendell commented on GitHub: I did 300 over 200 as 200 was almost instant, 300 is still fast and still looks decent.
Author
Owner

@kmendell commented on GitHub:

If users want the instant look they can be disabled, can you try the latest fi in the v1.0.0 branch and see if it's better? I updated the fade wrapper, which is the main thing that was updated with the animation update. A lot of the others ones already existed before I made the UI Changes

@kmendell commented on GitHub: If users want the instant look they can be disabled, can you try the latest fi in the v1.0.0 branch and see if it's better? I updated the fade wrapper, which is the main thing that was updated with the animation update. A lot of the others ones already existed before I made the UI Changes
Author
Owner
@ItalyPaleAle commented on GitHub: @kmendell thanks but I think i see a lot of slower animations, for example: https://github.com/pocket-id/pocket-id/blob/d6104bbb351672e2b3d6aa2c09083359d0428d94/frontend/src/routes/authorize/components/client-provider-images.svelte#L25 https://github.com/pocket-id/pocket-id/blob/d6104bbb351672e2b3d6aa2c09083359d0428d94/frontend/src/routes/authorize/components/client-provider-images.svelte#L34 https://github.com/pocket-id/pocket-id/blob/d6104bbb351672e2b3d6aa2c09083359d0428d94/frontend/src/routes/authorize/components/client-provider-images.svelte#L42 https://github.com/pocket-id/pocket-id/blob/d6104bbb351672e2b3d6aa2c09083359d0428d94/frontend/src/routes/authorize/components/client-provider-images.svelte#L47 https://github.com/pocket-id/pocket-id/blob/d6104bbb351672e2b3d6aa2c09083359d0428d94/frontend/src/routes/login/components/login-logo-error-success-indicator.svelte#L17 https://github.com/pocket-id/pocket-id/blob/d6104bbb351672e2b3d6aa2c09083359d0428d94/frontend/src/lib/components/fade-wrapper.svelte#L51 https://github.com/pocket-id/pocket-id/blob/d6104bbb351672e2b3d6aa2c09083359d0428d94/frontend/src/app.css#L117-L118 https://github.com/pocket-id/pocket-id/blob/d6104bbb351672e2b3d6aa2c09083359d0428d94/frontend/src/app.css#L72 > I did 300 over 200 as 200 was almost instant, 300 is still fast and still looks decent. Almost instant is what we want IMHO! Users should not perceive the delay
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/pocket-id#221