Morphing Devices

An experimental morphing devices slideshow with CSS Transitions for showcasing responsive web design screenshots.

Morphing Devices

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.

Please note that this is very experimental and only works as intended in browsers that support the respective CSS properties.

MorphingDevices_iMac

There are four devices which we will use to display different screenshots of responsive designs. Two of them, the tablet and the smartphone, can also be rotated. What we do is to interchange the classes depending on the device and since the device has transitions defined, we’ll see a morphing effect. Note that we also animate pseudo-elements here which might not be supported in all browsers (especially mobile browsers).

MorphingDevices_MacBook

The rotation on the last two devices happens by adding another class which will rotate the device 90 degrees.

MorphingDevices_iPad

The images are changed by adding the new picture and fading out the previous one. This also creates a morphing effect where the image gets stretched or squeezed to accomodate the new size.

MorphingDevices_iPhone

The better technology to choose for this kind of effect is undoubtedly SVG, but for practicality reasons we started this experiment with CSS and JS.

We hope you like and enjoy it and get inspired!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.