Create this 3D parallax-style SCROLL ANIMATION with THREE.JS! [FREE CODE | CODEPEN]

JOIN OUR DISCORD!   / discord   In this tutorial, I show you how you can create this super smooth and parallax-style scroll animation for your website with Three.js, where the camera movement is tied to the user's scroll position!

Get my Gradient HDR Pack to support me! https://miroleon.gumroad.com/l/gradie...

Previous Three.js Parallax Tutorial    • Create this 3D PARALLAX-STYLE Landing...  
Previous Three.js Tutorial Gradient HDRs    • Level Up Your Renderings with GRADIEN...  
Previous Three.js Tutorial Introduction    • Create this 3D WEB RENDERING with FRE...  
Previous Three.js Surface Imperfection Tutorial    • Improve Your THREE.JS MATERIALS and R...  

Find the code for this scene – https://codepen.io/miroleon/pen/GRPpVrd

Get 2 Freebies – https://miroleon.gumroad.com/l/gradie...
Find the GitHub Repo with the Freebies and a Three.js Example – https://github.com/miroleon/gradient_...

Find my other artwork on Instagram –   / miroxleon  
Follow me on Twitter –   / miroxleon  
For all other links and contact, visit my website – https://miroleon.de/links

Chapters:
0:00 Introduction
1:06 HTML Setup
1:35 CSS Setup
2:16 JS Setup
2:41 HDR Setup
3:08 Parallax Setup
5:42 Update Scroll Function
6:41 Update Camera on Scroll
8:10 Animate Function
8:36 Outro