From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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).
The rotation on the last two devices happens by adding another class which will rotate the device 90 degrees.
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.
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!