Scrollable pages with GSAP and WebGI – Custom Threejs Render by Anderson Mancini

Ready to make your web pages pop with stunning 3D? This course dives into creating interactive experiences using Three.js and GSAP’s ScrollTrigger, letting you build pages that feel alive as users scroll. You’ll learn to integrate WebGI for super realistic results and embed 3D models directly into your designs for a truly immersive feel.

🎯 What you’ll learn

• Create interactive experiences with Three.js and GSAP’s ScrollTrigger.
• Master scroll-based animations to bring your designs to life.
• Integrate WebGI for realistic 3D rendering.
• Embed 3D models into your web pages for rich, immersive designs.
• Get access to free source code to follow along.

✅ Requirements

• Skills: Basic knowledge of Javascript and having NPM installed.
• Tools: [Inferred] Code editor (e.g., VS Code), Web browser.
• Hardware: [Inferred] A computer capable of running a local development server and rendering 3D graphics.

📝 Description

This is a crash course focused on building scrollable web experiences using GSAP and WebGI. WebGI is a custom Three.js renderer that helps you achieve realistic results with great performance right out of the box. You’ll learn how to create interactive pages by embedding 3D models and implementing scroll-based animations.

We’ll go through the entire process together, starting with page design using Adobe XD and the WebGI editor to get your assets, then moving into coding with a provided boilerplate. You’ll build all the HTML and CSS step-by-step. Later, you’ll learn how to install GSAP and configure animations for each section, finding the perfect camera positions for smooth transitions. Finally, we’ll cover merging 3D animations with other on-page animations.

The course content is structured to guide you from the basics to advanced techniques:
– Understanding what you’ll create.
– Configuring 3D models with the WebGI editor.
– Setting up your Three.js boilerplate and dependencies.
– Exporting assets and building your page with HTML and CSS.
– Preparing and implementing animations using GSAP and ScrollTrigger.
– Merging 3D and HTML element animations.
– Performance tweaks and essential tips.

You’ll get access to the Adobe XD design files and the project’s source code, allowing you to follow along and build your own pages. Plus, you can ask questions to get help with your projects.

🧑‍🎓 Who this course is for:

• Developers with some JavaScript background looking to enhance their Three.js skills for scroll experiences.
• Designers curious about the possibilities of integrating 3D into web browsers.
• Beginners to Three.js who want a clearer understanding of how to combine 3D with web pages.

🧑‍🏫 About the Author

Anderson Mancini is an entrepreneur and developer with over 15 years of experience in technology, communication, and interactivity. As a founding partner of Neotix Transformação Digital since 2005, he has produced over 400 digital marketing projects. Anderson is also a speaker and creative developer specializing in interactive experiences using Three.js, WebGL, and WEBGi.

🏁 Final Result

• Students will complete the course with a portfolio-ready interactive webpage featuring a 3D model with scroll-based animations, demonstrating proficiency in Three.js, GSAP, and WebGI.