🔀 Merge pull request #145 from Schneegans/refactor/transition-tweaking

docs/changelog.md

@@ -7,6 +7,7 @@
 #### Enhancements
 
 * The standard uniforms of all shaders have been updated: The window size is now passed as a `vec2` and there is a new `bool uForOpening` which is set to `true` if a window-open animation is ongoing, to `false` otherwise.
+* Refactored how the size and opacity transitions of the window actors are set up. Effects can now only specify a desired actor scale which will not change during the animation. All dynamic scaling and fading must be implemented in the shaders now.
 
 #### Bug Fixes
 

docs/how-to-create-new-effects.md

@@ -175,22 +175,11 @@ var SimpleFade = class SimpleFade {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 1.0, y: 1.0};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows should neither be scaled nor faded.
-  static tweakTransition(actor, settings, forOpening) {
-    return {
-      'opacity': {from: 255, to: 255, mode: 4},
-      'scale-x': {from: 1.0, to: 1.0, mode: 4},
-      'scale-y': {from: 1.0, to: 1.0, mode: 4}
-    };
   }
 }
 

extension.js

@@ -416,18 +416,24 @@ class Extension {
     const testMode = this._settings.get_boolean('test-mode');
 
     // The following is used to tweak the ongoing transitions of a window actor. Usually
-    // windows are faded in / out scaled up / down slightly by GNOME Shell. Here, we allow
+    // windows are faded in / out scaled up / down slightly by GNOME Shell. Here, we tweak
-    // modifications to this behavior by the effects.
+    // the transitions so that nothing changes. The window stays opaque and is scaled to
-    const config = effect.tweakTransition(actor, this._settings, forOpening);
+    // actorScale.
+    const actorScale = effect.getActorScale(this._settings);
+
+    // To make things deterministic during testing, we set the effect duration to 5
+    // seconds.
     const duration =
       testMode ? 5000 : this._settings.get_int(effect.getNick() + '-animation-time');
 
     // All animations are relative to the window's center.
     actor.set_pivot_point(0.5, 0.5);
 
-    // This goes through all properties given in the config object and tweaks any ongoing
+
-    // transitions accordingly. If there is no ongoing transition for a given property, a
+    // We tweak the opacity and scale of the actor. If there is no ongoing transition for
-    // new one is set up.
+    // a property, a new one is set up.
+    const config = {'opacity': 255, 'scale-x': actorScale.x, 'scale-y': actorScale.y};
+
     for (const property in config) {
       let transition = actor.get_transition(property);
 
@@ -450,11 +456,10 @@ class Extension {
       // Tweak the transition according to the config object. For some reason, there are
       // rare cases, where no transition is set up. This happens from time to time...
       if (transition) {
-        const middle = (config[property].to + config[property].from) / 2;
         transition.set_duration(duration);
-        transition.set_to(testMode ? middle : config[property].to);
+        transition.set_to(config[property]);
-        transition.set_from(testMode ? middle : config[property].from);
+        transition.set_from(config[property]);
-        transition.set_progress_mode(config[property].mode);
+        transition.set_progress_mode(Clutter.AnimationMode.LINEAR);
       }
     }
 

src/Apparition.js

@@ -102,23 +102,11 @@ var Apparition = class Apparition {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 2.0, y: 2.0};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows are set to twice their original size, so that we have
-  // some space to draw the animation. We also set the animation mode to "Linear".
-  static tweakTransition(actor, settings, forOpening) {
-    return {
-      'opacity': {from: 255, to: 255, mode: 1},
-      'scale-x': {from: 2.0, to: 2.0, mode: 1},
-      'scale-y': {from: 2.0, to: 2.0, mode: 1}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all

src/BrokenGlass.js

@@ -105,23 +105,11 @@ var BrokenGlass = class BrokenGlass {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 2.0, y: 2.0};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows are set to twice their original size, so that
-  // we have some space to draw the shards. We also set the animation mode to "Linear".
-  static tweakTransition(actor, settings, forOpening) {
-    return {
-      'opacity': {from: 255, to: 255, mode: 1},
-      'scale-x': {from: 2.0, to: 2.0, mode: 1},
-      'scale-y': {from: 2.0, to: 2.0, mode: 1}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all

src/EnergizeA.js

@@ -97,22 +97,11 @@ var EnergizeA = class EnergizeA {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 1.0, y: 1.0};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows should neither be scaled nor faded.
-  static tweakTransition(actor, settings, forOpening) {
-    return {
-      'opacity': {from: 255, to: 255, mode: 3},
-      'scale-x': {from: 1.0, to: 1.0, mode: 3},
-      'scale-y': {from: 1.0, to: 1.0, mode: 3}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all
@@ -169,6 +158,7 @@ if (utils.isInShellProcess()) {
         ${shaderSnippets.standardUniforms()}
         ${shaderSnippets.noise()}
         ${shaderSnippets.edgeMask()}
+        ${shaderSnippets.easing()}
 
         uniform vec3  uColor;
         uniform float uScale;
@@ -181,10 +171,10 @@ if (utils.isInShellProcess()) {
         // This method returns two values:
         //  result.x: A mask for the particles.
         //  result.y: The opacity of the fading window.
-        vec2 getMasks() {
+        vec2 getMasks(float progress) {
-          float fadeInProgress  = clamp(uProgress/FADE_IN_TIME, 0, 1);
+          float fadeInProgress  = clamp(progress/FADE_IN_TIME, 0, 1);
-          float fadeOutProgress = clamp((uProgress-FADE_IN_TIME)/FADE_OUT_TIME, 0, 1);
+          float fadeOutProgress = clamp((progress-FADE_IN_TIME)/FADE_OUT_TIME, 0, 1);
-          float heartProgress   = clamp((uProgress-(1.0-HEART_FADE_TIME))/HEART_FADE_TIME, 0, 1);
+          float heartProgress   = clamp((progress-(1.0-HEART_FADE_TIME))/HEART_FADE_TIME, 0, 1);
 
           // Compute mask for the "atom" particles.
           float dist = length(cogl_tex_coord_in[0].st - 0.5) * 4.0;
@@ -214,7 +204,9 @@ if (utils.isInShellProcess()) {
       `;
 
       const code = `
-        vec2 masks       = getMasks();
+        float progress = easeOutQuad(uProgress);
+
+        vec2 masks       = getMasks(progress);
         vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
 
         // Shell.GLSLEffect uses straight alpha. So we have to convert from premultiplied.
@@ -226,7 +218,7 @@ if (utils.isInShellProcess()) {
         cogl_color_out.rgb = mix(uColor, windowColor.rgb, 0.2 * masks.y + 0.8);
         cogl_color_out.a = windowColor.a * masks.y;
 
-        vec2 scaledUV = (cogl_tex_coord_in[0].st-0.5) * (1.0 + 0.1*uProgress);
+        vec2 scaledUV = (cogl_tex_coord_in[0].st-0.5) * (1.0 + 0.1*progress);
         scaledUV /= uScale;
 
         // Add molecule particles.

src/EnergizeB.js

@@ -97,22 +97,11 @@ var EnergizeB = class EnergizeB {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 1.0, y: 1.0};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows should neither be scaled nor faded.
-  static tweakTransition(actor, settings, forOpening) {
-    return {
-      'opacity': {from: 255, to: 255, mode: 3},
-      'scale-x': {from: 1.0, to: 1.0, mode: 3},
-      'scale-y': {from: 1.0, to: 1.0, mode: 3}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all
@@ -169,6 +158,7 @@ if (utils.isInShellProcess()) {
         ${shaderSnippets.standardUniforms()}
         ${shaderSnippets.noise()}
         ${shaderSnippets.edgeMask()}
+        ${shaderSnippets.easing()}
 
         uniform vec3  uColor;
         uniform float uScale;
@@ -183,10 +173,10 @@ if (utils.isInShellProcess()) {
         //  result.y: A mask for the streaks which follow the shower particles.
         //  result.z: A mask for the final "atom" particles.
         //  result.w: The opacity of the fading window.
-        vec4 getMasks() {
+        vec4 getMasks(float progress) {
-          float showerProgress = uProgress/SHOWER_TIME;
+          float showerProgress = progress/SHOWER_TIME;
-          float streakProgress = clamp((uProgress-SHOWER_TIME)/STREAK_TIME, 0, 1);
+          float streakProgress = clamp((progress-SHOWER_TIME)/STREAK_TIME, 0, 1);
-          float fadeProgress  = clamp((uProgress-SHOWER_TIME)/(1.0 - SHOWER_TIME), 0, 1);
+          float fadeProgress  = clamp((progress-SHOWER_TIME)/(1.0 - SHOWER_TIME), 0, 1);
 
           // Gradient from top to bottom.
           float t = cogl_tex_coord_in[0].t;
@@ -231,7 +221,9 @@ if (utils.isInShellProcess()) {
       `;
 
       const code = `
-        vec4 masks       = getMasks();
+        float progress = easeOutQuad(uProgress);
+
+        vec4 masks       = getMasks(progress);
         vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
 
         // Shell.GLSLEffect uses straight alpha. So we have to convert from premultiplied.
@@ -244,21 +236,21 @@ if (utils.isInShellProcess()) {
         cogl_color_out.a = windowColor.a * masks.w;
 
         // Add leading shower particles.
-        vec2 showerUV = cogl_tex_coord_in[0].st + vec2(0, -0.7*uProgress/SHOWER_TIME);
+        vec2 showerUV = cogl_tex_coord_in[0].st + vec2(0, -0.7*progress/SHOWER_TIME);
         showerUV *= 0.02 * uSize / uScale;
         float shower = pow(simplex2D(showerUV), 10.0);
         cogl_color_out.rgb += uColor * shower * masks.x;
         cogl_color_out.a += shower * masks.x;
 
         // Add trailing streak lines.
-        vec2 streakUV = cogl_tex_coord_in[0].st + vec2(0, -uProgress/SHOWER_TIME);
+        vec2 streakUV = cogl_tex_coord_in[0].st + vec2(0, -progress/SHOWER_TIME);
         streakUV *= vec2(0.05 * uSize.x, 0.001 * uSize.y) / uScale;
         float streaks = simplex2DFractal(streakUV) * 0.5;
         cogl_color_out.rgb += uColor * streaks * masks.y;
         cogl_color_out.a += streaks * masks.y;
 
         // Add glimmering atoms.
-        vec2 atomUV = cogl_tex_coord_in[0].st + vec2(0, -0.025*uProgress/SHOWER_TIME);
+        vec2 atomUV = cogl_tex_coord_in[0].st + vec2(0, -0.025*progress/SHOWER_TIME);
         atomUV *= 0.2 * uSize / uScale;
         float atoms = pow((simplex3D(vec3(atomUV, uTime))), 5.0);
         cogl_color_out.rgb += uColor * atoms * masks.z;

src/Fire.js

@@ -119,22 +119,11 @@ var Fire = class Fire {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 1.0, y: 1.0};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows should neither be scaled nor faded.
-  static tweakTransition(actor, settings, forOpening) {
-    return {
-      'opacity': {from: 255, to: 255, mode: 3},
-      'scale-x': {from: 1.0, to: 1.0, mode: 3},
-      'scale-y': {from: 1.0, to: 1.0, mode: 3}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all
@@ -298,6 +287,7 @@ if (utils.isInShellProcess()) {
         ${shaderSnippets.noise()}
         ${shaderSnippets.edgeMask()}
         ${shaderSnippets.compositing()}
+        ${shaderSnippets.easing()}
 
         uniform bool  u3DNoise;
         uniform float uScale;
@@ -348,8 +338,10 @@ if (utils.isInShellProcess()) {
         // fadeWidth:     The relative size of the window-hiding gradient in [0..1].
         // edgeFadeWidth: The pixel width of the effect fading range at the edges of the window.
         vec2 effectMask(float hideTime, float fadeWidth, float edgeFadeWidth) {
-          float burnProgress      = clamp(uProgress/hideTime, 0, 1);
+          float progress = easeOutQuad(uProgress);
-          float afterBurnProgress = clamp((uProgress-hideTime)/(1-hideTime), 0, 1);
+
+          float burnProgress      = clamp(progress/hideTime, 0, 1);
+          float afterBurnProgress = clamp((progress-hideTime)/(1-hideTime), 0, 1);
 
           // Gradient from top to bottom.
           float t = cogl_tex_coord_in[0].t * (1 - fadeWidth);
@@ -361,7 +353,7 @@ if (utils.isInShellProcess()) {
           float effectMask = clamp(t*(1-windowMask)/burnProgress, 0, 1);
 
           // Fade-out when the window burned down.
-          if (uProgress > hideTime) {
+          if (progress > hideTime) {
             float fade = sqrt(1-afterBurnProgress*afterBurnProgress);
             effectMask *= mix(1, 1-t, afterBurnProgress) * fade;
           }

src/Hexagon.js

@@ -101,22 +101,11 @@ var Hexagon = class Hexagon {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 1.0, y: 1.0};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows should neither be scaled nor faded.
-  static tweakTransition(actor, settings, forOpening) {
-    return {
-      'opacity': {from: 255, to: 255, mode: 1},
-      'scale-x': {from: 1.0, to: 1.0, mode: 1},
-      'scale-y': {from: 1.0, to: 1.0, mode: 1}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all

src/Matrix.js

@@ -107,24 +107,11 @@ var Matrix = class Matrix {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 1.0, y: 1.0 + settings.get_double('matrix-overshoot')};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows should not be faded but scaled vertically to allow for some
-  // overshooting.
-  static tweakTransition(actor, settings, forOpening) {
-    const yScale = 1.0 + settings.get_double('matrix-overshoot');
-    return {
-      'opacity': {from: 255, to: 255, mode: 1},
-      'scale-x': {from: 1.0, to: 1.0, mode: 1},
-      'scale-y': {from: yScale, to: yScale, mode: 1}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all

src/SnapOfDisintegration.js

@@ -106,23 +106,11 @@ var SnapOfDisintegration = class SnapOfDisintegration {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 1.2, y: 1.2};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows are set to 1.2 times their original size, so that we have
-  // some space to draw the dust particles. We also set the animation mode to "Linear".
-  static tweakTransition(actor, settings, forOpening) {
-    return {
-      'opacity': {from: 255, to: 255, mode: 1},
-      'scale-x': {from: 1.2, to: 1.2, mode: 1},
-      'scale-y': {from: 1.2, to: 1.2, mode: 1}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all

src/TRexAttack.js

@@ -103,23 +103,13 @@ var TRexAttack = class TRexAttack {
 
     return shader;
   }
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
-  // The parameter 'forOpening' is set to true if this is called for a window-open
-  // transition, for a window-close transition it is set to false. The modes can be set to
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
 
-  // For this effect, we slightly increase the window's scale as part of the warp effect.
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  static tweakTransition(actor, settings, forOpening) {
+  // animation. This is useful if the effect requires drawing something beyond the usual
-    const warp = 1.0 + 0.5 * settings.get_double('claw-scratch-warp');
+  // bounds of the actor. This only works for GNOME 3.38+.
-    return {
+  static getActorScale(settings) {
-      'opacity': {from: 255, to: 255, mode: 3},
+    const scale = 1.0 + 0.5 * settings.get_double('claw-scratch-warp');
-      'scale-x': {from: forOpening ? warp : 1.0, to: forOpening ? 1.0 : warp, mode: 3},
+    return {x: scale, y: scale};
-      'scale-y': {from: forOpening ? warp : 1.0, to: forOpening ? 1.0 : warp, mode: 3}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all
@@ -195,6 +185,7 @@ if (utils.isInShellProcess()) {
         ${shaderSnippets.standardUniforms()}
         ${shaderSnippets.noise()}
         ${shaderSnippets.compositing()}
+        ${shaderSnippets.easing()}
 
         // See assets/README.md for how this texture was created.
         uniform sampler2D uClawTexture;
@@ -247,7 +238,7 @@ if (utils.isInShellProcess()) {
       `;
 
       const code = `
-        float progress = uForOpening ? 1.0-uProgress : uProgress;
+        float progress = uForOpening ? 1.0-easeOutQuad(uProgress) : easeOutQuad(uProgress);
 
         // Warp the texture coordinates to create a blow-up effect.
         vec2  coords = cogl_tex_coord_in[0].st * 2.0 - 1.0;
@@ -255,6 +246,10 @@ if (utils.isInShellProcess()) {
         coords = (coords/dist * pow(dist, 1.0 + uWarpIntensity)) * 0.5 + 0.5;
         coords = mix(cogl_tex_coord_in[0].st, coords, progress);
 
+        // Scale down the window according to the warp.
+        float scale = 0.5 * uWarpIntensity * (1.0 - progress);
+        coords = coords * (scale + 1.0) - scale * 0.5;
+
         // Accumulate several random scratches. The color in the scratch map refers to the
         // relative time when the respective part will become invisible. Therefore we can
         // add a value to make the scratch appear later.

src/TVEffect.js

@@ -98,22 +98,11 @@ var TVEffect = class TVEffect {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 1.0, y: 1.0};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows are scaled down vertically.
-  static tweakTransition(actor, settings, forOpening) {
-    return {
-      'opacity': {from: 255, to: 255, mode: 3},
-      'scale-x': {from: 1.0, to: 1.0, mode: 3},
-      'scale-y': {from: forOpening ? 0.5 : 1.0, to: forOpening ? 1.0 : 0.5, mode: 3}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all
@@ -163,6 +152,7 @@ if (utils.isInShellProcess()) {
       const declarations = `
         // Inject some common shader snippets.
         ${shaderSnippets.standardUniforms()}
+        ${shaderSnippets.easing()}
 
         uniform vec3 uColor;
 
@@ -171,10 +161,16 @@ if (utils.isInShellProcess()) {
         const float LR_TIME    = 0.4;  // Relative time for the left/right animation.
         const float LR_DELAY   = 0.6;  // Delay after which the left/right animation starts.
         const float FF_TIME    = 0.1;  // Relative time for the final fade to transparency.
+        const float SCALING    = 0.5;  // Additional vertical scaling of the window.
       `;
 
       const code = `
-        float progress = uForOpening ? 1.0-uProgress : uProgress;
+        float progress = uForOpening ? 1.0-easeOutQuad(uProgress) : easeOutQuad(uProgress);
+
+        // Scale down the window vertically.
+        float scale = 1.0 / mix(1.0, SCALING, progress) - 1.0;
+        vec2 coords = cogl_tex_coord_in[0].st;
+        coords.y = coords.y * (scale + 1.0) - scale * 0.5;
 
         // All of these are in [0..1] during the different stages of the animation.
         // tb refers to the top-bottom animation.
@@ -185,11 +181,11 @@ if (utils.isInShellProcess()) {
         float ffProgress = smoothstep(0, 1, clamp((progress - 1.0 + FF_TIME)/FF_TIME, 0, 1));
 
         // This is a top-center-bottom gradient in [0..1..0]
-        float tb = cogl_tex_coord_in[0].t * 2;
+        float tb = coords.y * 2;
         tb = tb < 1 ? tb : 2 - tb;
         
         // This is a left-center-right gradient in [0..1..0]
-        float lr = cogl_tex_coord_in[0].s * 2;
+        float lr = coords.x * 2;
         lr = lr < 1 ? lr : 2 - lr;
         
         // Combine the progress values with the gradients to create the alpha masks.
@@ -200,7 +196,7 @@ if (utils.isInShellProcess()) {
         // Assemble the final alpha value.
         float mask = tbMask * lrMask * ffMask;
 
-        cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st);
+        cogl_color_out = texture2D(uTexture, coords);
         
         // Shell.GLSLEffect uses straight alpha. So we have to convert from premultiplied.
         if (cogl_color_out.a > 0) {

src/Wisps.js

@@ -98,22 +98,11 @@ var Wisps = class Wisps {
     return shader;
   }
 
-  // The tweakTransition() is called from extension.js to tweak a window's open / close
+  // The getActorScale() is called from extension.js to adjust the actor's size during the
-  // transitions - usually windows are faded in / out and scaled up / down by GNOME Shell.
+  // animation. This is useful if the effect requires drawing something beyond the usual
-  // The parameter 'forOpening' is set to true if this is called for a window-open
+  // bounds of the actor. This only works for GNOME 3.38+.
-  // transition, for a window-close transition it is set to false. The modes can be set to
+  static getActorScale(settings) {
-  // any value from here: https://gjs-docs.gnome.org/clutter8~8_api/clutter.animationmode.
+    return {x: 1.0, y: 1.0};
-  // The only required property is 'opacity', even if it transitions from 1.0 to 1.0. The
-  // current value of the opacity transition is passed as uProgress to the shader.
-  // Tweaking the actor's scale during the transition only works properly for GNOME 3.38+.
-
-  // For this effect, windows should be scaled down slightly but not faded.
-  static tweakTransition(actor, settings, forOpening) {
-    return {
-      'opacity': {from: 255, to: 255, mode: 3},
-      'scale-x': {from: forOpening ? 0.9 : 1.0, to: forOpening ? 1.0 : 0.9, mode: 3},
-      'scale-y': {from: forOpening ? 0.9 : 1.0, to: forOpening ? 1.0 : 0.9, mode: 3}
-    };
   }
 
   // This is called from extension.js if the extension is disabled. This should free all
@@ -176,6 +165,7 @@ if (utils.isInShellProcess()) {
         ${shaderSnippets.noise()}
         ${shaderSnippets.edgeMask()}
         ${shaderSnippets.compositing()}
+        ${shaderSnippets.easing()}
 
         uniform vec2  uSeed;
         uniform vec3  uColor;
@@ -187,6 +177,7 @@ if (utils.isInShellProcess()) {
         const int   WISPS_LAYERS    = 8;
         const float WISPS_IN_TIME   = 0.5;
         const float WINDOW_OUT_TIME = 1.0;
+        const float SCALING         = 0.9;
 
         // Returns a grid of randomly moving points. Each grid cell contains one point which
         // moves on an ellipse. 
@@ -228,10 +219,14 @@ if (utils.isInShellProcess()) {
       `;
 
       const code = `
-        float progress = uForOpening ? 1.0-uProgress : uProgress;
+        float progress = uForOpening ? 1.0-easeOutQuad(uProgress) : easeOutQuad(uProgress);
+
+        // Scale down the window slightly.
+        float scale = 1.0 / mix(1.0, SCALING, progress) - 1.0;
+        vec2 coords = cogl_tex_coord_in[0].st * (scale + 1.0) - scale * 0.5;
         
         // Get the color of the window.
-        cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st);
+        cogl_color_out = texture2D(uTexture, coords);
         
         // Shell.GLSLEffect uses straight alpha. So we have to convert from premultiplied.
         if (cogl_color_out.a > 0) {

src/shaderSnippets.js

@@ -33,6 +33,17 @@ function standardUniforms() {
   `;
 }
 
+// This provides some basic easing function. More can be added if required!
+// Taken from here:
+// https://gitlab.gnome.org/GNOME/mutter/-/blob/main/clutter/clutter/clutter-easing.c
+function easing() {
+  return `
+  float easeOutQuad(float x) {
+    return -1.0 * x * (x - 2);
+  }
+  `;
+}
+
 function math2D() {
   return `
   float distToLine(vec2 origin, vec2 direction, vec2 point) {