I made a three.js webgl shader animation which runs in the background of a page, more specifically a homogeneous spherical formed shape with vertex displacement using noise to deform the geometry, like a wobbling blob.
Basically, the animation works but still there’s an annoying bug which occurs while scrolling.
I’ve made a simplified version on CodePen, so you can have a look.
As you can see there’re a few sections (div’s with 100vh, auto-snapping to them with fullpage.js) and depending on how far one scroll down, the shape moves more intensely and gets stronger bulges (and the color changes). I am using noise-density & -strength as well as frequency & amplitude values for the distortion which are set as mesh-material-uniforms. I have set start and end values for each noise-setting except time which starts at zero.
Every time the page is scrolled, a for-loop iterates through the noise-settings by their keys and writes a new value, which is calculated with the start, end & scroll distance values, to the specific mesh-material-uniform using the GSAP.to() function to smooth out the transition.
The problem is that if the page is open for a few minutes (min. 3) without reloading and then one scrolls from one section to the next, the transition becomes way too fast (the longer the page is open the faster it gets). It’s some kind of related to the time variable which is also used for the noise distortion. As it counts up all the time, at some point the large number influences the distortion I guess… I reordered code in any possible way, tried to restart the time value which led to a sudden new shape form and starts from then on, so no luck so far. Also I am reading questions/answers from forums since 3 weeks now but none was really related to that scrolling behavior…
Thanks in advance for anyone who took the time to read all of it and maybe can help me with that problem, I’d really appreciate it.