I originally created a diagonal slider using the viewport width and height to determine where each box/image needed to be both on the x and y axis. However, when I started implementing animations the performance started to suffer. This is due to the window size being a dependency of a useEffect.

I am curious to know if there may be a better approach to spacing out the items diagonally that doesn't cause a re-render when the browser window resizes. Would grid or possibly flexbox be a better route or possibly something else. I've linked my sandbox below.

Sandbox: https://codesandbox.io/s/relaxed-butterfly-zot2xe?file=/components/Images.js

Animated Sandbox: https://codesandbox.io/s/mystifying-spence-m52t2p?file=/components/Images.js

CodePudding user response：

This is a matter of slope. Slope is the incline of a line, which is being conducted by 2 points (a line segment, rather).

Now, the first thing that I see in your question is:

responsively

Usually when we are dealing with responsive stuff we use percentages, because they automatically adjust on resizes etc. So we know that m = rise/run, m being slope. Let's say you wanted your slope to be -2, for example.

Your coordinates would be (starting at [0, 0]):

[0, 0]
[2, 1]
[4, 2]
[6, 3]
[8, 4]

NOTE: I DID NOT USE NEGATIVES BECAUSE [0, 0] IS ON THE TOP LEFT, THERE ARE NO NEGATIVES.