🚀 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

YouTube

The post details a comprehensive course aimed at building an interactive 3D e-commerce landing page using Next.js, GSAP, Three.js, and Prismic. The project revolves around creating a stunning website for a fictional soda brand named Fizzy. The course covers foundational aspects using Next.js and Prismic for scalability and management, designing with Tailwind CSS, adding animations with GSAP, and incorporating 3D effects with Three.js. The post assures step-by-step guidance for users of all levels, highlighting the customizable nature of the project, and provides resources and support materials.

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

I want to do a project very similar to this one, and with this one I have a guide to start and have a point of view.

Loved the Website I had seen the website earlier but didn’t knew there would a tut for this, definitely gonna watch it!

An amazing resource for anyone looking to elevate their web development skills with 3D design and animation!