How to apply page transition on mouse scroll?

I’m trying to implement website similar with this.

When you scroll down/up once, page(also object) will be changed with animation.

I searched google for 3hours, can’t find anything related this technic.

Is there any existed method or solution here?


Just add your transition function to a scroll event listener

Something similar to

window.onscroll = function() {myFunction()}; function myFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { //first transition } else { //next transition } }

Maybe this topic will give you some ideas:

Thanks! It is almost same with my question. Can you explain about using shader or example related that?

Well, implement the idea with clamping in a vertex shader. Start point of a vertex, direction (a normalized vector) and the limit of length. That limit of the length you can pass as a parameter into the clamp() function:
clamp( currentLength, 0, lengthLimit);
where the current length is direction multiplied by time.
As a first approximation of what to do in shaders :slight_smile:

Also, have a look at this reply from another topic:

Very helpful example! So I have to combine your example with addEventListener(‘mousewheel’) :slight_smile: