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

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.

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.

---

---

📍 Chapters:
01:38 Website tour
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
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

[codedusting]

Is it possible to let the marketing team create new pages with custom components created before hand and assembling them together without the development team's involvement after an initial development process?

[shadowslayer]

WOAAHHH! DEFINITELY MAKE MORE VIDEOS LIKE THIS PLEASE PLEASEEE!

[ojeabuoosaimi]

You guys are amazing for dropping this gem. 😘

[quentmadeit]

I'm back again from finishing the golden standard site. I can't wait to follow along with this gem. Also, thank you for this series. It has influenced how I build any website. Prismic Rocks!

[mecil]

Amazing！ This is the best gsap tutorial I've seen on youtube.Thx Man！

[mohammadabbas]

Man o man, legend is back with masterpiece

[edray]

Amazing work! Love the tech stack, and the design!

[blokche_dev]

Not a Next.js user but you guys are amazing dropping such cool stuff. Thanks Alex!
I still need to take a look at the Svelte one :D

[nicolettifps]

Duuuude this content is the best that i ever saw, even me that have no good english, this is completetly understanDABLE? hahaha you know? this is amazing, and you didact is pretty good, you make it easy, i hope you do more r3f tutorials, thats my dream work on it someday but dont have brazilian content yet. thanks a lot.

[cirtey]

What an eye candy. You are the best. Insta follow.

[darcyrachel]

can I plz know how to get really small hdr files ?
thank you, you are doing really great.

[muzammilali]

I must say, Outstanding content 🔥❤️ Keep going mate. The concepts and content you delivered and the final product, Gosshh! 🔥
I have been working with Framer Motion and vanilla Three Js on production level for almost 2 years now, but after watching this I feel like I am so behind the trend 😅.
I can't Thank you enough for this video 💕 Now I know how powerfull GSAP is compared to Framer Motion and also "react-three-fiber" than "THREE.js" .... It is going to save me alot of time and effort.
Once again Thank you for this 🙌 keep making this quality content

[chrizmadrid]

Amazing!!! I love your projects. Can you guys do a sveltekit version too?

[abdullahajayi]

Mehn...

Haven't watch this past 8 mins, but I am sure this is gonna be a great video. 💯

Thanks man ❤🎉

[BhavnishBhardwaj-sn]

You are awesome. I'm going to start this from tomorrow

[FrancoBarrera-nvrt]

Thank you, excellent project, thank you for using Next.

[luizricardo.design]

I loved watching the video! I really enjoy using Prismic in my projects; it adds a lot of value due to its simplicity and fulfills my clients' needs very well. I'd like to take the opportunity to suggest an idea for the next NextJS video: creating a multipage site using slices, along with framer-motion/gsap for animations, as well as preload and transition effects between pages. Keep up the amazing work, which has greatly helped in expanding my knowledge with this incredible Headless CMS 🚀

[sleeplessinde]

Great video, absolutely love it. Btw how to get the images of each individual can and the image of all cans without the background behind them?

[gamer-lqwv]

Hey just a doubt can you please tell the scroll triggere which you applied to hero class i didnt know what the hero class contain

[petea]

Hey legends, love the content. Any tips on how that amazing Fizzi hover animation was made, did you make a a static SVG logo then add the clipping mask to it ? want to learn absolutely love it :D