Fade In/Out Electron Window. “Photo by https://unsplash.com/@tomlaudiophile”

Fade In/Out Electron Window

Today we will cover how to fade in and out electron browser window to achieve some cool looking effect. We will write some functions do this in Electron’s renderer process.

Let’s start out by writing the function that fades In a browser window:

fadeWindowIn — A function that fades in a given browser window.

Writing a fadeOut function writing inverse of our fade In logics:

fadeWindowOut — A function that fades out a given browser window.

Now that we have both functions, using them goes like this:

Usage of both fadeWindowOut and fadeWindowIn function.

Bonus

Let’s say for some reason we want to stop fading at will. Since both fadeWindowIn and fadeWindowOut method returns a time identifier, we can use this to cancel the interval at will using the clearInterval function.

Stop fading at will.

Demo

I have set up and an Electron Fiddle for demo purpose 👇https://gist.github.com/757e9afce3b6bd97f2b024b787653dfe

A demo, beautiful init?