I figured out the bending and scrolling, but I have an issue with the slider going from maximized phase to minimized phase. I can’t figure out the math. i tried ChatGPT but no luck…
Here is a simplified version of my code to test and update Glitch :･ﾟ✧
So dragging the slider is good, and clicking on a mesh expands it also good. But then, when I drag and the slider is in maximized phase, it must minimize and continue dragging, currently it just snaps to the first mesh position. You can see how it should be here https://aristidebenoist.com/
I really need help with this one, I tried for a few days to fix it. I can’t see the code correctly anymore, and as I said ChatGPT is useless in this case…
I’d use either a bell curve (normal distribution) or a cosine curve to move vertices, so that this will push the central panels towards the camera. The amplitude of the shift could be multiplied by the scrolling speed. Thus fast scrolling will generate bigger bum; while slow scrolling will make the bump smaller. In this case there is no need to care about transition from minimized to maximized and back to minimized phase - it will happen by itself.
I do not have an issue with the bending when dragged… I solved that but I did not added here in the example to keep the code as simple as possible, the issue that I have is after is maxmized and dragging going to minimize the positon of the meshes is wrong, there is some math that I can’t fix or see at this point…
I do need the transformation from minimize to maximize, just look at the initial example please https://aristidebenoist.com/
Maybe the easiest is to have two states - minimized, that you already have, and precalculated maximized. When you go from min->max or max->min just interpolate between the two states and shift the camera. Would this be sufficient?
The code that I proveided works fine the only issue is when going from maximized to minimie there is that shift in the x poston, that is what I need to fix to finish this project… it can be done but I just can’t see the math behind it.
I can’t shift the camera, it will not flow as in the provided example…
After clicking on a mesh and maximizing and dragging quickly again, there is a small jump on the x position, not sure how to fix i,t and ChatGPT does not help much with this. Click on the meh that are not in the center to replace them.
Here is the live example with textures and stuff Linear Slider
I also updated the code in Glitch with a simplified version without textures and other stuff…Glitch :･ﾟ✧
I can share the full code, is a cool project you can use it on your own if you like…
Okay, so here is what I did so far. I had to rewrite the entire logic from the glitch example so that is not good anymore. The only issue that I have now is that when maximizing, if the mesh is far left or right, there is a big shift, and it looks bad. The minimize is perfect and prety much the rest, after this bug is fxied I can do the little deatisl like lerp visual speed and other stuff..
I think this is the way they did it on the original website not sure… I mean the dargging/maximize/minimize
Here is the project, inside there is the full project in Vite, the code that we need to fix is in the .js/FWDLSSliderManager.js http://webdesign-flash.ro/p/ls/zip.zip
The methods responsible for this are updatePosition and goToItem…
I hope you will figure this out I am exhausted, i can’t see things right anymore…
