How to control a particle morph (custom shader) with mouse scroll instead of automatic animation?

Questions
, , , , , ,
1

I have a Three.js project where I use particles + morphing with a custom shader.
Right now, the morph animation plays automatically (e.g., particles transform from a circle into an image, and from one image into another).

What I would like to achieve is:

  • Instead of the animation playing automatically with time,

  • I want the morph progress to be controlled smoothly by mouse scroll (so scrolling down increases morphing, scrolling up reverses it), and of course by touch too on mobile.

What is the best solution?

I have never worked with scrollbase animations on Three.js.

Current link:

Screenshot 2025-08-18 at 11.08.34 PM
Screenshot 2025-08-18 at 11.08.34 PM1145Ă—897 77.5 KB

1 Like
2

Look here

2 Likes
3

Essentially instead of allowing the render loop to increment and update some sort of “time” uniform you’d update it with the progress of a scrollable element, if you can port your example to an editable environment like codepen or codesandbox it should be easy enough for someone to demonstrate the change

2 Likes