Skip to content

Five suggestions for a smoother animation

Thomas requested to merge github/fork/tuxor1337/master into master

Created by: tuxor1337

  1. In _showTopPanel don't add a Tween for the height of the panel but rather add a Tween for the y position of the panel. The trick is to set the y position to -PANEL_HEIGHT, resetting the panel height to the original panel height and then tweening with respect to y. The effect is a much smoother animation:
_showTopPanel: function() {;;
    Tweener.addTween(, {
        y: 0,
  1. What renders the animation even smoother is connecting to the "showing" event instead of the "shown" event of Main.overview.

  2. In order for the panel not to slide over the search bar in overview, you will want to add Main.overview._relayout(); somewhere to the end of _showTopPanel. But please note that this won't work when connected to the "shown" event (see 2).

  3. I personally like it better when the _rightBox, _centerBox and _leftBox appear simultaneously with the whole panel and thus recommend you to add this Tween after the panel's tween instead of putting it inside of onComplete.

Merge request reports