Animate canvas on scroll then display next section

Questions
1

Hello,

I am pretty new to threejs and I am looking for a particular effect.

In my previous attempts I tried to make a parallax slider pinned for a certain amount and then display the next content. A working (pretty crappy) version can be viewed here: https://codepen.io/monsmado/pen/LvGdNa
This example uses a combination of ScrollMagic and GreenSock. But I really don’t like the opacity effect after scrolling and then displays the rest of the content.

Now what I am looking for is more like that when you start scrolling the images or even SVG’s start to move on the screen. Once that animation has been played (on scrolling) I want to display the next content.
This example https://codepen.io/mikeK/pen/ZZGjLV shows more what I am looking in terms of scrolling and then displaying the content. The problem is that it depends on the pixels/percentage in height and therefore doesn’t really do the job well. However it does do the job of playing the animation on scroll and then goes to content.

I’ve been browsing through a lot of examples here on ThreeJs and on other websites but haven’t seen anything I am looking for.
If someone here knows an example or can give me a head start then I can maybe solve my problem here.

Greetings,
Mark

2

I don’t think three.js is the right solution for this issue since it does not provide any features you need in order to solve the problem. Anyway, I’ve created a fiddle to demonstrate how I would basically solve the issue with plain JavaScript:

The idea is to use a wheel event listener and store the amount of wheel roll in a variable scrollY. When the variable exceeds certain threshold values, the code performs an animated transition from one application state to the next one. In the example, I’ve used tween.js.