Hi! Made this last year.
I’m a beginner. When I came up with it I thought this code was really something, but looking to it now… it looks like a mess 
Check it out: https://red-threejs.web.app/
Code: GitHub - 9uifranco/red: Three.js animation with Gsap/ScrollTrigger 
It is good.
It is also good that the red is just a red paint.
Can you make the transition smoother? Currently the scroll makes 3 small stops between the initial and the final scene. These stops happen both while scolling down and scrolling up. I thought they are made on purpose, but I was not able to understand what was so special with these three stops.
I’m using the ScrollTrigger plugin from GSAP to make elements move/appear based on the user’s scrolling. With ScrollTrigger you define triggers that start animating an element when the page reaches a certain point and stop when it reaches another. The stops you said are probably gaps between these triggers, which means that after an animation finishes, the user has to scroll a bit further before the next one starts.
Thank you for commenting. Made me think through it. A smoother transition indeed would be better. When I get some time I’ll adjust the starting position of each trigger to immediately follow the ending position of the previous one to fix it.
