How do Google create the distortion effect on the Google Ideas homepage?

Question

The Google Ideas homepage features an animation that distorts the appearance of some of the text and a button with a static sound effect, in order to simulate signal interference as the content transitions from one item to the next.

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

How are they achieving this? I can see classes and styles jumping around in the dev tools, so JavaScript is definitely involved, but I can't find the relevant section of script itself.

Answer 1

It's not that hard, 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 the glitch effect. And with these two libs, that task becomes quite trivial.

html2canvas(node, {
    onrendered: function (canvas) {
        // hide the original node
        node.style.display = "none";
        // add the canvas node to the node's 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/