Skip to content

uuuulala/Threejs-folding-cardboard-box-tutorial

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

On-Scroll Folding Cardboard Box

Demo for the tutorial on how to create a 3D cardboard box that folds and unfolds on scroll using Three.js and the GSAP ScrollTrigger.

Box preview

Article on Codrops

Demo

Installation

No package manager / build system is needed. You can run the page as it is on local server (any web server, really).

The page is using the following libs:

  1. GSAP and their scrollTrigger plugin. Both are added as CDN, but you can turn it to JS module or NPM if needed: https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger

  2. Three.js + their addons OrbitControls and mergeBufferGeometries. Both are added as CDN with import map, it can also be changed: https://threejs.org/docs/#manual/en/introduction/Installation

  3. lil-gui controls added in the same way as threejs addons https://github.com/georgealways/lil-gui

Misc

Follow Ksenia: Twitter, Codepen, website

Follow Codrops: Twitter, Facebook, GitHub, Instagram

License

MIT

Made with 💙 by Codrops

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published