Trouble distributing images responsively on a diagonal in react/nextjs

[noahtrotman]

Hi, 

 

I am currently trying to create an infinite diagonal slider in react/nextjs. One of the issues I am having trouble with is distributing the images diagonally for all viewport sizes. Currently there are 4 images in the array that is being mapped to the screen but I'm just trying to have the screen show 3 on the viewport. One in the bottom left, the center and top right with the images being pinned to its center. (for the bottom left and top right, 3/4 of it would be out of the viewport)

 

I have gotten it to work for some viewport sizes but for others that's not the case and it becomes an issue when I start animating with gsap's modifiers as they become offset very quickly.

 

I've simplified my code in a sandbox to show what I have. Any sort of help/direction would be greatly appreciated.

https://codesandbox.io/s/i4tksf?file=/components/Slider.js

 

Thanks

Noah

 

[noahtrotman]

So, I guess I was overthinking it and it came to my head just now when looking at this stack question.

https://stackoverflow.com/questions/44036932/performance-of-css-flex-vs-manual-javascript-computation

 

I've updated the sandbox for the change.

[Rodrigo]

Hi @noahtrotman and welcome to the GreenSock forums!

 

Is great to hear that you were able to sort it out and thank you for sharing your work and where you found the solution for this, we really appreciate your input! 🙌

 

Happy Tweening!!!