How is Javascript used to make a website like this?

How is Javascript used to make a website like this?
0

#1

I know a bit of JS, but idk how its used to make a dynamic site like this.


#2

is it made with just Javascript? i think it’s combined with some other web technology but i don’t know it


#3

Looks like everything is being rendered to a canvas that fills the whole screen. Without looking into the source I would assume a lot of it could be done with drawImage()


#4

Yes, does look like just one big canvas:


#5

The main.js file is quite large at ~33k lines. Judging from some of the errors, there’s ReactJS in there. I’m not sure why they’re using the canvas API, but the site is painfully slow to start and then to resize. Stack trace shows that a forEach loop is responsible for slowing the redraw. Not really relevant to the question, but it makes me want to tear my skin off. Really awesome site, otherwise.

So, yeah. ReactJS and the canvas API at least, but I bet there’s some other plugin at work for the image transitions. I also recognize the keyboard control legend as being from some input abstraction library, but I can’t remember the name right now.


#6

PixiJS

Complete coincidence that I discovered this while looking for something else.


#7

That’s the power of SVG transformations with Javascript using Canvas for you.

Yes, you can make SVG animations with pure CSS but to attain this level of badassery you need to be proficient in math and javascript in order to manipulate all those shapes, also, good CSS is required in order to style the shapes that don’t require much animation.