Threejs + GSAP + WEBGi

Threejs + GSAP + WEBGi is a free boilerplate template for building scrollable landing pages that combine three.js 3D scenes, GSAP ScrollTrigger animations, and the WEBGi engine in TypeScript, bundled with Parcel.

What is the Threejs + GSAP + WEBGi template?

This is a vanilla TypeScript project (no UI framework) that pairs three.js 3D rendering with GSAP's ScrollTrigger for scroll-driven camera animations, all running through the WEBGi engine. As a template, it takes a 3D model and WEBGi editor exports as inputs and produces a scrollable, animated landing page with HTML/CSS design. It uses Parcel as its bundler and includes a default scene viewer accessible at http://localhost:1234/index.html after running npm start. The template ships as the companion source code for a free step-by-step YouTube course on building scrollable pages with ScrollTrigger and three.js.

Key Features

• Vanilla TypeScript setup — The project uses plain TypeScript without a UI framework, keeping the code straightforward to read and modify.
• WEBGi engine integration — Uses WEBGi for 3D model rendering, camera control, and exporting images from the WEBGi editor to design the page.
• GSAP ScrollTrigger animations — ScrollTrigger drives the camera and scene based on page scroll, creating the scroll-linked 3D effect.
• Parcel bundler — Simple npm scripts let you serve a dev build with npm start and create a production bundle with npm run build.
• Free companion course — A nine-step YouTube tutorial covers choosing a model, using the WEBGi editor, designing with exported images, setting up the boilerplate, changing the model, creating HTML/CSS, importing GSAP, and completing the ScrollTrigger camera animation.
• Live demo — The template is deployed at http://drill-webgi-tutorial.vercel.app so you can preview the finished scrollable page.
• Assets directory — Models and exported images are stored in assets, with a default scene ready to view.

Who is it for?

• Developers new to 3D web animation — They can start from this working example instead of configuring three.js and GSAP from scratch.
• Frontend developers following the YouTube course — The template is the exact source used in the video, so they can code along and compare results.
• Freelancers prototyping interactive landing pages — They can quickly replace the model and text to build their own scroll-based 3D pages.

Use cases

• Product landing pages: Present a 3D model with scroll-driven camera movement for a more immersive product showcase.
• Educational projects: Learn how WEBGi editor exports integrate with HTML/CSS and scroll animations.
• Interactive portfolios: Add 3D hero sections that respond to scrolling.

How does the template work?

Install dependencies with npm install. Start the development server with npm start and open http://localhost:1234/index.html to see the default scene. To make changes, swap the model in the assets directory, edit the HTML/CSS, and modify the GSAP ScrollTrigger animation code. Build for production with npm run build. The companion YouTube course explains each of these steps in order.

Pricing

The template and the associated course are 100% free.

FAQ

Is the Threejs + GSAP + WEBGi template free?

Yes, this is a free template from a free YouTube course. The repository has no paid tier or license restrictions beyond the WEBGi SDK license.

What tools do I need to run the template?

You need Node.js and npm. After cloning, run npm install to install dependencies, then npm start for development. The default scene appears at http://localhost:1234/index.html.

Does the template use a UI framework like React?

No. The project is vanilla TypeScript with Parcel as the bundler. Styling is done with plain HTML and CSS.

What is WEBGi?

WEBGi is the 3D engine (webgi.xyz) used in this template for rendering 3D models and exporting images from its editor. The template links to WebGi docs for the latest version and SDK license.