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.