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

Related tags

Learning resource threejs course threejs-learning threejs-boilerplate gsap-scrolltrigger pixotronics
Overview

Threejs + GSAP + WEBGi

100% Free Course

This is a template used in my fast course "building scrolable pages with ScrollTrigger and Threejs" for a vanilla (no ui-framework) project with webgi engine in typescript using parcel bundler.

⚡️ Live Link: http://drill-webgi-tutorial.vercel.app

Course content

On my YouTube channel, you can find a step by step video on how to use this source code to build your own pages.

  • Chosing a model
  • Use WEBGi editor to create images
  • Design the page using exported images from WEBGi
  • Setup the WEBGi boilerplate into VSCODE
  • Change the model
  • Create the html and CSS
  • Import GSAP and setup the library
  • Create the ScrollTrigger animation for the camera
  • Final adjustments

Click here or on the image to visit the Free course on Youtube.

Getting started

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 see the default scene in a viewer.

The assets are stored in the assets directory.

To build the project for production:

npm run build

Documentation

About webgi: https://webgi.xyz/

For the latest version and documentation: WebGi Docs.

License

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

You might also like...

A demo of using the new require.context syntax in Expo with Metro bundler

Metro Context Modules Demo This is a demo of using the experimental 'Context Module' (require.context) feature in Metro bundler. Setup metro.config.js

Nov 19, 2022

The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

介绍 项目集成了工作流引擎、报表引擎和组织机构权限管理后台，可以应用于OA、HR、CRM、PM等系统开发。配合使用tlv8 ide可以快速实现业务系统开发、测试、部署。 后台采用Spring MVC架构简单方便，前端使用流行的layui界面美观大方。 采用组件开发技术，提高系统的灵活性和可扩展性;采

Dec 27, 2022

📦 🍣 Zero-config JS bundler for ESM, CommonJS, and .d.ts outputs

pkgroll Write your code in ESM & TypeScript and bundle it to get ESM, CommonJS, and type declaration outputs with a single command! Features Zero conf

Dec 23, 2022

📦 🍣 Zero-config JS bundler for ESM, CommonJS, and .d.ts outputs. (Forked from pkgroll)

📦 🍣 puild (A fork of pkgroll) Write your code in ESM & TypeScript and bundle it to get ESM, CommonJS, and type declaration outputs with a single com

Sep 6, 2022

lua-pack is an advanced lua bundler similar to webpack made for lua 5.1+ written in js

lua-pack is an advanced lua bundler similar to webpack made for lua 5.1+ written in js that makes working on large scale projects easy and fast. it takes all the files in your project and packs them into a single production ready file.

May 14, 2022

A quick start Create React App template with react-router-dom, material-ui, gh-pages and firebase

A quick start Create React App template with react-router-dom, material-ui, gh-pages and firebase. With google authentication, routing and deployment capabilities built in.

Feb 22, 2022

Landing page using Next.js and Tailwind

This is a Next.js project bootstrapped with create-next-app. Demo Application Please check out this link(https://next-cloudbunnies-nft-landing-page.ve

Nov 27, 2022

Landing page using Next.js and Tailwind

This is a Next.js project bootstrapped with create-next-app. Demo Application Please check out this link(https://next-cloudbunnies-nft-landing-page.ve

Aug 4, 2022

A simple and safe template engine.

A simple and safe template engine.

TagScript A simple and safe template engine. Description TagScript is a drop in easy to use string interpreter that lets you provide users with ways o

Dec 31, 2022
Comments
  • Editor and library version change

    Editor and library version change

    To get the transparency working, we had to update the editor of the library used into the project to match the same as the one used in the current editor, among other changed need because of the new version of the editor.

    opened by ektogamat 0
Owner
Anderson Mancini
Anderson Mancini
GitHub https://drill-webgi-tutorial.vercel.app/
Javascript Library to create scrollable table with infinite rows and columns.

Fattable Demo Checkout the demo here. What is it? Fattable is a javascript Library to create table with infinite scroll, with infinite number of rows

Paul Masurel 477 Sep 19, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Shopify Landing (Open source landing page shopify application)

SHOPIFY Open source landing page shopify application Configuration and Setup Key Features Technologies used ?? Screenshots Author License Configuratio

Gilbert Hutapea 8 May 10, 2023
This fictive project was created to showcase my current skills using Three.js and GSAP.

Bike Demo Three.js This fictive project was created to showcase my current skills using Three.js and GSAP. It was inspired by the tutorial created by

Kiril Bernard Tucker 54 Dec 29, 2022
Some ideas for grid to slideshow switch animations using GSAP's Flip plugin.

Grid to Slideshow Switch Animations Some ideas for grid to slideshow switch animations using GSAP's Flip plugin. Article on Codrops Demo Installation

Codrops 31 Jun 22, 2023
Next.js landing pages with two axios carousel

Next.js landing pages with two axios carousel SEO friendly page builder in React.js. Heroes, sign-up forms and calls to action. Deployed from sanity.i

null 2 Mar 30, 2022
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

Okiki Ojo 34 Dec 14, 2022
Free Next.js responsive landing page template for SaaS products made using JAMStack architecture.

✨ Free Next.js marketing website template for SaaS startups ✨ Everything you need to build a great landing page / marketing website for your startup.

RainBow 6 Nov 5, 2022