diff --git a/docs/how-to-create-new-effects.md b/docs/how-to-create-new-effects.md
index 2a5714d..7392f69 100644
--- a/docs/how-to-create-new-effects.md
+++ b/docs/how-to-create-new-effects.md
@@ -34,14 +34,14 @@ Of course, you can replace any occurrence of this name and its nick `simple-fade
Three simple steps are required to create a new effect.
You will have to ...
-1. add a preferences key for enabling the effect,
+1. add preferences keys for enabling the effect,
2. create an additional effects class, and finally
3. register the new effect in two places.
### 1. Expanding the Schema
-For enabling the new effect, the boolean settings key `simple-fade-close-effect` is required.
-In this example, we also add an integer valued settings key for storing the animation time of the new effect and a floating point value for storing another property of the effect - we will use them later in the tutorial.
+For enabling the new effect, the boolean settings keys `simple-fade-open-effect`, `simple-fade-close-effect`, and `simple-fade-animation-time` are required.
+In this example, we also add a floating point value for storing another property of the effect - we will use them later in the tutorial.
Just copy the XML code below to the file [`schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml`](../schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml).
Just remember to replace `simple-fade` with your custom name!
@@ -56,6 +56,12 @@ Just remember to replace `simple-fade` with your custom name!
Use the Simple Fade effect for window closing.
+
+ false
+ Simple Fade Open Effect
+ Use the Simple Fade effect for window opening.
+
+
1500
Simple Fade Animation Time
@@ -146,8 +152,8 @@ var SimpleFade = class SimpleFade {
// ---------------------------------------------------------------- API for extension.js
// This is called from extension.js whenever a window is closed with this effect.
- static createShader(actor, settings) {
- return new Shader(settings);
+ static createShader(actor, settings, forOpening) {
+ return new Shader(settings, forOpening);
}
// The tweakTransition() is called from extension.js to tweak a window's open / close
@@ -182,7 +188,7 @@ if (utils.isInShellProcess()) {
const shaderSnippets = Me.imports.src.shaderSnippets;
Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
- _init(settings) {
+ _init(settings, forOpening) {
super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
this.set_shader_source(`
@@ -207,8 +213,10 @@ if (utils.isInShellProcess()) {
// Radial distance from window edge to the window's center.
float dist = length(cogl_tex_coord_in[0].st - 0.5) * 2.0 / sqrt(2.0);
- // This gradually dissolves from [1..0] from the outside to the center.
- float mask = (1.0 - uProgress * (1.0 + FADE_WIDTH) - dist + FADE_WIDTH) / FADE_WIDTH;
+ // This gradually dissolves from [1..0] from the outside to the center. We
+ // switch the direction for opening and closing.
+ float progress = ${forOpening ? '1.0 - uProgress' : 'uProgress'};
+ float mask = (1.0 - progress * (1.0 + FADE_WIDTH) - dist + FADE_WIDTH) / FADE_WIDTH;
// Make the mask smoother.
mask = smoothstep(0, 1, mask);