A template for buildind scrollable landing pages with Gsap, ScrollTrigger and webgi engine in typescript using parcel bundler.

In this video, you can watch the design process of this page, using WEBGi. Using the scroll to tell stories is something very pleasant and simple to do with tools like WEBGI. It uses a modified version of Threejs to allow advanced effects rendering with good performance and ease of use.

All the code responsible for rendering is only 20 lines long. The rest of the code handles the interface, with the Scroll-based animations using the GSAP ScrollTrigger, which is quite powerful for building experiences like this.

by Anderson Mancini

First install the dependencies:

npm install

To run the project in development mode:

npm start

Then navigate to http://localhost:1234/index.html in a web browser.

To build the project for production:

npm run build

For the latest version and documentation: WebGi Docs.

Resources: WEBGi, Parcel , TypeScript, Babel, gsap, scrollTrigger

For license and terms of use, see the SDK License.