Electron, how to make a window slide from offscreen? (like the notifications center)

Question

I'd like to achieve the same opening/closing animations as macOS' notifications center, basically having it slide from a side.

Is it possible to do this using electron?

Answer 1

I think it is possible. Electron has everything you need for it:

• A Frameless Window is probably the way to go for this.
• win.setPosition(x, y[, animate]), win.setSize(width, height[, animate]), win.hide() and win.show() is all you need to animate the window
• screen and Display will help you put the window in the correct position

Initial state:

• Place window at the side of the screen
• Set to smallest possible width
• Hidden

Opening:

1. Show window
2. Increase width and change position towards center of the screen until the window reaches the desired size

Closing:

1. Decrease width and change position towards side of the screen
2. Hide window when side is reached

The content of the window is then just CSS and JS magic, to make it look good.