Build a 3D Ecommerce Landing Page with Next.js, GSAP, Three.js and Prismic - Full Course

Video Description

🍿 NEW COURSE 2025 🍿 https://youtu.be/LBOhVng5rk8 🚀 Build a scroll animated 3D landing page with Next.js 14, GSAP, Prismic, Three.js, Tailwind, and TypeScript! In this creative and fun course, we will make an e-commerce product landing page to sell a fictional soda brand called Fizzi. You'll learn how to bring 3D models into your projects, and how to fully animate them for scroll effects and so much more. You’ll learn how to use Next.js, the leading React framework, as well as Prismic, a CMS that gives you a Headless Page Builder. You'll learn react-three-fiber to use Three.js within React. We’ll also use Tailwind CSS to style the super polished website, and Vercel to host it! We’ll get bootstrapped with a minimal starter to set up Next.js and Prismic for us, and I’ll walk you through everything you need to know. At the end of this course you’ll have built and deployed a show stopping 3D experience that will impress job prospects or potential clients. --- 🔗 Course Resources: https://prismic.io/courses/fizzi-3d-website 🔗 Figma project: https://fig.page/fizzi 🔗 Final repository: https://github.com/a-trost/fizzi 🔗 Live Site: https://fizzi-demo.vercel.app/ --- 📍 Chapters: 00:00 Welcome to the Fizzi Next.js course 01:38 Website tour 06:47 Setting up Next.js and Prismic 14:42 Slice Machine 101 - Building the Hero 01:05:16 Styling with Tailwind CSS 01:29:54 Getting Started with GSAP 01:37:25 GSAP Timeline 01:47:19 GSAP Scroll Trigger 01:58:54 Getting Started with Three.js 02:14:06 Build a floating 3D soda can 02:39:16 React Three Fiber 02:47:37 Animating the can 03:13:51 Adding bubbles 03:21:59 Zustand and syncing animations 03:31:01 Handling the mobile version 03:35:28 3D performance 03:36:58 Loading screen 03:44:21 Diving can 04:37:07 Carousel Slice 05:16:43 Alternating text HTML & CSS 05:25:21 Alternating text animation 05:48:12 Big text Slice 05:56:11 Footer 06:01:39 Fixing details 06:03:41 Deploy to GitHub and Vercel --- As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API. --- #nextjs #gsap #prismic