I'm getting into web animations, WebGL, Canvas, ThreeJS, GSAP and all those fun tools. I'm investigating different websites and how they're able to achieve certain effects.

I am mind blown by these two sites: https://14islands.com/ & https://www.hellomonday.com/.

Their animations look simple(ish). Liquid effect on images. I know with ThreeJS filters or WebGL or other Canvas libraries you can achieve the effects. What I don't understand is that both of these sites have a full-sized <canvas> element fixed to the background. And render almost all the images on the site through the <canvas> rather than pure HTML elements.

This allows to have all images to have really dope effects. But what I don't understand is how can they sync the positions and sizes of the images with HTML DOM elements so perfectly?

This seems like a nightmare to code. Also wouldn't it be a huge performance burden to update every image on the canvas when the user scrolls or resizes the page?

I believe I'm missing something. Perhaps there's a library that handles most of this?

If there are any simple examples, I'd love to see them.

Thank you for your time :)

CodePudding user response：

Welp turns out this can be done quite simply with ThreeJS. Perhaps there are ways as well but this seems easiest to me.

TL;DR: You can create a scene for a div, and you can do this multiple times with ThreeJS so that it renders a scene within the specified div.

Demo: https://threejs.org/examples/?q=multiple#webgl_multiple_elements

Code: https://github.com/mrdoob/three.js/blob/master/examples/webgl_multiple_elements.html