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

🚀 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://dub.sh/fizzi
🔗 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