Animate opacity when showing St.Widget

Author: harshadgavali

.vscode/settings.json

@@ -8,4 +8,5 @@
         "**/Thumbs.db": true,
         "node_modules": true,
     },
+    "typescript.preferences.importModuleSpecifierEnding": "index",
 }

extension/constants.ts

@@ -38,4 +38,5 @@ export const ExtSettings = {
 	DEFAULT_OVERVIEW_GESTURE_DIRECTION: true,
 };
 
-export const RELOAD_DELAY = 150; // reload extension delay in ms
+export const RELOAD_DELAY = 150; // reload extension delay in ms
+export const WIGET_SHOWING_DURATION = 100; // animation duration for showing widget

extension/src/animations/arrow.ts

@@ -6,6 +6,7 @@ import St from '@gi-types/st';
 import { imports } from 'gnome-shell';
 import { registerClass } from '../../common/utils/gobject';
 import { easeActor } from '../utils/environment';
+import { WIGET_SHOWING_DURATION } from '../../constants';
 
 const ExtMe = imports.misc.extensionUtils.getCurrentExtension();
 const Util = imports.misc.util;
@@ -59,6 +60,16 @@ export const ArrowIconAnimation = registerClass(
 			this._outer_circle.scale_x = this._transition.outer_circle.from;
 			this._outer_circle.scale_y = this._outer_circle.scale_x;
 			this._arrow_icon.opacity = 255;
+			
+			// animating showing widget
+			this.opacity = 0;
+			this.show();
+			easeActor(this as St.Widget, {
+				opacity: 255,
+				mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+				duration: WIGET_SHOWING_DURATION,
+			});
+
 			this._arrow_icon.set_gicon(Gio.Icon.new_for_string(`${ExtMe.dir.get_uri()}/assets/${icon_name}`));
 		}
 
@@ -73,13 +84,20 @@ export const ArrowIconAnimation = registerClass(
 		gestureEnd(duration: number, progress: number, callback: () => void) {
 			if (this._transition === undefined) return;
 
+			easeActor(this as St.Widget, {
+				opacity: 0,
+				mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+				duration,
+			});
+
 			const translation_x = Util.lerp(this._transition.arrow.from, this._transition.arrow.end, progress);
 			easeActor(this._arrow_icon, {
 				translation_x,
 				duration,
 				mode: Clutter.AnimationMode.EASE_OUT_EXPO,
 				onStopped: () => {
 					callback();
+					this.hide();
 					this._arrow_icon.opacity = 0;
 					this._arrow_icon.translation_x = 0;
 					this._outer_circle.scale_x = 1;

extension/src/forwardBack.ts

@@ -120,7 +120,6 @@ export class ForwardBackGestureExtension implements ISubExtension {
 						const keys = this._getClutterKeyForFocusedApp(SwipeGestureDirection.LeftToRight);
 						this._keyboard.sendKeys(keys);
 					}
-					this._arrowIconAnimation.hide();
 				});
 				break;
 			case AnimationState.LEFT:
@@ -132,7 +131,6 @@ export class ForwardBackGestureExtension implements ISubExtension {
 						const keys = this._getClutterKeyForFocusedApp(SwipeGestureDirection.RightToLeft);
 						this._keyboard.sendKeys(keys);
 					}
-					this._arrowIconAnimation.hide();
 				});
 		}
 	}
@@ -150,8 +148,6 @@ export class ForwardBackGestureExtension implements ISubExtension {
 			this._arrowIconAnimation.gestureBegin('arrow1-right-symbolic.svg', false);
 			this._arrowIconAnimation.set_position(workArea.x + workArea.width - 2 * width, workArea.y + Math.round((workArea.height - height) / 2));
 		}
-
-		this._arrowIconAnimation.show();
 	}
 
 	_getWorkArea() {

extension/src/pinchGestures/closeWindow.ts

@@ -6,14 +6,16 @@ import St from '@gi-types/st';
 import { global, imports } from 'gnome-shell';
 
 import { PinchGestureType } from '../../common/settings';
+import { WIGET_SHOWING_DURATION } from '../../constants';
 import { TouchpadPinchGesture } from '../trackers/pinchTracker';
 import { easeActor } from '../utils/environment';
 import { getVirtualKeyboard, IVirtualKeyboard } from '../utils/keyboard';
 
 const Main = imports.ui.main;
 const Util = imports.misc.util;
 
-const START_OPACITY = 0;
+const END_OPACITY = 0;
+const END_SCALE = 0.5;
 
 enum CloseWindowGestureState {
 	PINCH_IN = -1,
@@ -37,7 +39,6 @@ export class CloseWindowExtension implements ISubExtension {
 			reactive: false,
 			style_class: 'gie-close-window-preview',
 			visible: false,
-			opacity: START_OPACITY,
 		});
 		this._preview.set_pivot_point(0.5, 0.5);
 		Main.layoutManager.uiGroup.add_child(this._preview);
@@ -66,13 +67,22 @@ export class CloseWindowExtension implements ISubExtension {
 		const frame = this._focusWindow.get_frame_rect();
 		this._preview.set_position(frame.x, frame.y);
 		this._preview.set_size(frame.width, frame.height);
+		
+		// animate showing widget
+		this._preview.opacity = 0;
 		this._preview.show();
+		easeActor(this._preview, {
+			opacity: 255,
+			mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+			duration: WIGET_SHOWING_DURATION,
+		});
 	}
 
 	gestureUpdate(_tracker: unknown, progress: number): void {
-		progress = progress - CloseWindowGestureState.PINCH_IN;
-		this._preview.set_scale(progress, progress);
-		this._preview.opacity = Util.lerp(START_OPACITY, 255, progress);
+		progress = CloseWindowGestureState.DEFAULT - progress;
+		const scale = Util.lerp(1, END_SCALE, progress);
+		this._preview.set_scale(scale, scale);
+		this._preview.opacity = Util.lerp(255, END_OPACITY, progress);
 	}
 
 	gestureEnd(_tracker: unknown, duration: number, progress: CloseWindowGestureState) {
@@ -97,9 +107,9 @@ export class CloseWindowExtension implements ISubExtension {
 
 	private _animatePreview(gestureCompleted: boolean, duration: number, callback?: () => void) {
 		easeActor(this._preview,  {
-			opacity: gestureCompleted ? 255 : 0,
-			scaleX: gestureCompleted ? 0 : 1,
-			scaleY: gestureCompleted ? 0 : 1,
+			opacity: gestureCompleted ? END_OPACITY : 255,
+			scaleX: gestureCompleted ? END_SCALE : 1,
+			scaleY: gestureCompleted ? END_SCALE : 1,
 			duration,
 			mode: Clutter.AnimationMode.EASE_OUT_QUAD,
 			onStopped: () => {
@@ -112,7 +122,7 @@ export class CloseWindowExtension implements ISubExtension {
 
 	private _gestureAnimationDone() {
 		this._preview.hide();
-		this._preview.opacity = START_OPACITY;
+		this._preview.opacity = 255;
 		this._preview.set_scale(1, 1);
 	}
 }

metadata.json

@@ -7,5 +7,5 @@
 	"settings-schema": "org.gnome.shell.extensions.gestureImprovements",
 	"url": "https://github.com/harshadgavali/gnome-gesture-improvements",
 	"uuid": "gestureImprovements@gestures",
-	"version": 22
+	"version": 22.5
 }