AppFlowy-IO/AppFlowy

Fork 0

mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2026-03-24 12:56:59 +00:00

[GH-ISSUE #3315] [FR] Use faster animations to toggle sidebar #1462

New issue

Closed

opened 2026-03-23 20:49:32 +00:00 by mirror · 11 comments

mirror commented

2026-03-23 20:49:32 +00:00

Owner

Originally created by @intonarumori on GitHub (Sep 1, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3315

Originally assigned to: @Sumit4482 on GitHub.

Description

The current animation duration for hiding and showing the sidebar is very slow.
It gives you the impression of the app being "sluggish".

Impact

Makes the app feel more "snappy" and higher quality.

Additional Context

Experimenting with easing functions would also improve the overall feel.

Originally created by @intonarumori on GitHub (Sep 1, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3315 Originally assigned to: @Sumit4482 on GitHub. ### Description The current animation duration for hiding and showing the sidebar is very slow. It gives you the impression of the app being "sluggish". ### Impact Makes the app feel more "snappy" and higher quality. ### Additional Context Experimenting with easing functions would also improve the overall feel.

mirror

2026-03-23 20:49:32 +00:00

closed this issue
added the
good first issue for devs

hacktoberfest

improvements

help wanted
labels

mirror commented

2026-03-23 20:49:33 +00:00

Author

Owner

@richardshiue commented on GitHub (Sep 5, 2023):

Hi @intonarumori thanks for raising this issue. Could you help me to clarify whether it's the delay when pressing on the button or the animation duration that's making the sliding animation feel sluggish?

@richardshiue commented on GitHub (Sep 5, 2023): Hi @intonarumori thanks for raising this issue. Could you help me to clarify whether it's the delay when pressing on the button or the animation duration that's making the sliding animation feel sluggish?

mirror commented

2026-03-23 20:49:33 +00:00

Author

Owner

@intonarumori commented on GitHub (Sep 5, 2023):

You can fine tune the animation in two ways:

Use shorter duration for the animation, this is what I was referring to
Use a more natural curve for the animation: this greatly affects the feel of the animation.
In real life moving objects have momentum, so they cannot stop abruptly. I think the current animation uses a linear curve and thus it feels unnatural. You can see the options here: https://api.flutter.dev/flutter/animation/Curves-class.html

I think easeOut would work best here, but feel free to experiment. The curve and duration work hand in hand, so experiment to get a good combination of the two.

@intonarumori commented on GitHub (Sep 5, 2023): You can fine tune the animation in two ways: - Use shorter duration for the animation, this is what I was referring to - Use a more natural curve for the animation: this greatly affects the feel of the animation. In real life moving objects have momentum, so they cannot stop abruptly. I think the current animation uses a linear curve and thus it feels unnatural. You can see the options here: https://api.flutter.dev/flutter/animation/Curves-class.html I think `easeOut` would work best here, but feel free to experiment. The curve and duration work hand in hand, so experiment to get a good combination of the two.

mirror commented

2026-03-23 20:49:33 +00:00

Author

Owner

@Sumit4482 commented on GitHub (Sep 28, 2023):

Hello @intonarumori , I would like to work on this issue. Can you please assign it to me ?
@annieappflowy

@Sumit4482 commented on GitHub (Sep 28, 2023): Hello @intonarumori , I would like to work on this issue. Can you please assign it to me ? @annieappflowy

mirror commented

2026-03-23 20:49:34 +00:00

Author

Owner

@richardshiue commented on GitHub (Oct 2, 2023):

Sure thing, have fun!

@richardshiue commented on GitHub (Oct 2, 2023): Sure thing, have fun!

mirror commented

2026-03-23 20:49:34 +00:00

Author

Owner

@Sumit4482 commented on GitHub (Oct 2, 2023):

Thanks :)

@Sumit4482 commented on GitHub (Oct 2, 2023): Thanks :)

mirror commented

2026-03-23 20:49:34 +00:00

Author

Owner

@Sumit4482 commented on GitHub (Oct 2, 2023):

Hi @intonarumori ,
I reduced the panel duration and found easeInOut to work best. Any thoughts or suggestions?
Thanks! Preview

@Sumit4482 commented on GitHub (Oct 2, 2023): Hi @intonarumori , I reduced the panel duration and found easeInOut to work best. Any thoughts or suggestions? Thanks! [Preview](https://drive.google.com/file/d/1azGuWoUvG7yRG3HN-ldg4ggt5rd6E3Z3/view?usp=drive_link)

mirror commented

2026-03-23 20:49:35 +00:00

Author

Owner

@richardshiue commented on GitHub (Oct 3, 2023):

Could you make a PR so that we can have a look at it?

@richardshiue commented on GitHub (Oct 3, 2023): Could you make a PR so that we can have a look at it?

mirror commented

2026-03-23 20:49:35 +00:00

Author

Owner

@Sumit4482 commented on GitHub (Oct 3, 2023):

Sure !

@Sumit4482 commented on GitHub (Oct 3, 2023): Sure !

mirror commented

2026-03-23 20:49:35 +00:00

Author

Owner

@intonarumori commented on GitHub (Oct 6, 2023):

@Sumit4482 Good job, looks better already ✨

I think in general easeOutXXX should be the goal here, with the current easeInOut you start slowly (in), speed up, then slow down again at the end (out). I think for this animation we don't need the in part.

As for the curve itself, you can study the visual representation of them on the Curves documentation.
You can see that the start of the curve gets steeper in this order: easeOut, easeOutSine, easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutExpo.

We are at the beginning of this spectrum with easeOut, it can be subjective and it's best to try all of them and use them for a bit of time to see if it feels natural, I usually end up with easeOutCubic for my apps.

Please note you might need to adjust the duration for some of these curves, the Flutter documentation explicitly mentions this for easeOutExpo here: https://api.flutter.dev/flutter/animation/Curves/easeOutExpo-constant.html

I would go for a bit more aggressive easeOutQuad or easeOutCubic, merge the PR, let the testers and the team use it for a bit and fine tune if necessary.

@intonarumori commented on GitHub (Oct 6, 2023): @Sumit4482 Good job, looks better already ✨ I think in general `easeOutXXX` should be the goal here, with the current `easeInOut` you start slowly (`in`), speed up, then slow down again at the end (`out`). I think for this animation we don't need the `in` part. As for the curve itself, you can study the visual representation of them on the [Curves documentation](https://api.flutter.dev/flutter/animation/Curves-class.html). You can see that the start of the curve gets steeper in this order: `easeOut`, `easeOutSine`, `easeOutQuad`, `easeOutCubic`, `easeOutQuart`, `easeOutQuint`, `easeOutExpo`. We are at the beginning of this spectrum with `easeOut`, it can be subjective and it's best to try all of them and use them for a bit of time to see if it feels natural, I usually end up with `easeOutCubic` for my apps. Please note you might need to adjust the duration for some of these curves, the Flutter documentation explicitly mentions this for `easeOutExpo` here: https://api.flutter.dev/flutter/animation/Curves/easeOutExpo-constant.html I would go for a bit more aggressive `easeOutQuad` or `easeOutCubic`, merge the PR, let the testers and the team use it for a bit and fine tune if necessary.

mirror commented

2026-03-23 20:49:36 +00:00

Author

Owner

@annieappflowy commented on GitHub (Nov 5, 2023):

Can you @Sumit4482 @richardshiue update the status of this issue?

@annieappflowy commented on GitHub (Nov 5, 2023): Can you @Sumit4482 @richardshiue update the status of this issue?

mirror commented

2026-03-23 20:49:36 +00:00

Author

Owner

@richardshiue commented on GitHub (Nov 5, 2023):