How does Google create a distortion effect on the Google Ideas homepage?

Question

The Google Ideas homepage contains animations that distort the look of some text and buttons with a static sound effect to simulate signal noise when content moves from one element to another.

Here's the Gif in case of a design change:

How do they achieve this? I see classes and styles that jump in dev tools, so JavaScript is definitely involved, but I cannot find the corresponding section of the script itself.

Answer 1

It is not that difficult, especially with html2canvas and canvas-glitch .

Basically, you just need to convert the DOM element to canvas, and then manipulate the image data to achieve a smoothing effect. And with these two libs this task becomes quite trivial.

html2canvas(node, { onrendered: function (canvas) { // hide the original node node.style.display = "none"; // add the canvas node to the node parent // practically replacing the original node node.parentNode.appendChild(canvas); // get the canvas' image data var ctx = canvas.getContext('2d'); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // glitch it var parameters = { amount: 1, seed: Math.round(Math.random()*100), iterations: 5, quality: 30 }; glitch(imageData, parameters, function(imageData) { // update the canvas' image data ctx.putImageData(imageData, 0, 0); }); } }); 

Click here for a demo: https://jsfiddle.net/ArtBIT/x12gvs1v/