Skip to content

Some cool text and Threejs Object Scroll-based animations using GSAP (GreenSock)

Notifications You must be signed in to change notification settings

AkbarBakhshi/threejs-gsap-scroll-animation

Repository files navigation

Quick Start Guide

This repo includes the code for the video on combining Threejs and Gsap libraries to make cool scroll-based animations. An effect similar to what you can see in my portfolio website at https://akbarbakhshi.com/about. Below is the link to the Youtube video:

https://youtu.be/eNryscJ0S9c

Check out the locoscroll branch to learn how to add Locomotive Scroll to the GSAP ScrollTrigger animation to provide a smooth scrolling experience. Here is the Youtube video with the Locomotive Sroll addition:

https://youtu.be/Ero_m7HTIgk

Download or clone the project on your local drive. Open Terminal (Command prompt) and navigate to the project folder. Then run npm install. You should see a new folder called node_modules in the project folder.

During Development, from the terminal, inside the project folder, run npm start command to start the server. You should see a new folder called public in the project folder with compiled css, javascript and all the files in the static folder. You now can visit localhost:3000 in your browser to access the home page.

For Production, make sure to run npm frontend:prod command inside the project folder.

About

Some cool text and Threejs Object Scroll-based animations using GSAP (GreenSock)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published