Need help with section transiton

Questions
,
1

Hi all, I am new to three.js and I need help. How to make transition on a slider like on this website?

Thanks in advance.

1 Like
2
  • your canvas fills the screen 100vw/100vh
  • in front of it is a 100vw/100vh scroll container set to overflow: auto, fill it with content large enough to stretch it so that it scrolls
  • now tie scrollTop to your canvas: sizes, positions, animations, colors, … since you know how long the scroll area is you can calculate percentages or 0-1 interpolation, 0 is the start, 1 the end, and that’s how you get to control when object X does what. for instance you could configure an object to come into view at 0.5 which would be the middle of your scroll page.

this is usually far more complex depending on what you want to do. look into these three demos to get an overall idea. they’re react but the principles are the same and you can glance over what’s happing. in vanilla it will be exponentially larger but you’ll work with the same principles anyway.

i made a tutorial on codrops for this once, maybe it helps: Scroll, Refraction and Shader Effects in Three.js and React | Codrops

1 Like
3

Thanks man, it will help!

4

This is amazing! Thank you!!