A slideshow concept where different screenshots are shown on morphing devices. One main element and two additional division are used for the parts of the devices, along with some pseudo-elements and the image anchor.

Today we want to share an experimental “morphing” slideshow with you. The idea is to transition between different devices that show a screenshot of a responsive website or app by applying a “device class”. By using the same elements and pseudo-elements for all the devices, we can create an interesting morph effect. We will control the classes and the switching of the image with some JavaScript. We’ve also added an option for autoplaying the slideshow and for rotating some of the devices.