Vigyata.AI
Is this your channel?

Creative Frontend Course | Master GSAP, Three.js & React in 10 Hours

182.7K views· 1,933 likes· 585:41· Dec 12, 2025

🛍️ Products Mentioned (24)

🚀 Tool that I use: Get 10% off with code JSMASTERY Openclaw VPS Setup: https://jsm.dev/openclaw-hostinger Learn how to use OpenClaw with me: https://jsm.dev/openclaw-course Unlock the world of creative web experiences in this 10-hour GSAP & Three.js full course. Start with crash courses for GSAP and Three.js, then build real-world projects like a Mojito Cocktails landing page and an Apple-style MacBook Pro site with interactive 3D elements. Finally, combine everything to create a stunning portfolio website that showcases your skills with smooth animations, immersive 3D, and pro-level design. Hostinger: https://jsm.dev/creative25-hostinger + Use code JAVASCRIPTMASTERY CodeRabbit: https://jsm.dev/creative25-coderabbit CodeRabbit CLI: https://jsm.dev/creative25-coderabbitcli Junie AI: https://jsm.dev/creative25-junie WebStorm: https://jsm.dev/creative25-webstorm Explore my Pro Content: ⭐ Join JS Mastery Pro: https://jsm.dev/creative25-jsm 💎 Become a Top 1% Next.js Developer: https://jsm.dev/creative25-nextjs 👨‍🔬 Master Next.js Testing: https://jsm.dev/creative25-testing 📗 GSAP Pro Course (includes GTAVI Website): https://jsm.dev/creative25-gsap 📕 Three.js 3D Pro Course: https://jsm.dev/creative25-threejs 📙 JavaScript Pro Course: https://jsm.dev/creative25-cpjsm 🚀 Launch Your SaaS Pro Course: https://jsm.dev/creative25-saas 📁 FREE Video Kits (Code, Figma, Assets, and more) 1st → Cocktail: https://jsm.dev/creative25-cocktail 2nd → Macbook: https://jsm.dev/creative25-macbook 3rd → Portfolio: https://jsm.dev/creative25-portfolio More Courses launching soon! Join the waitlists to get notified! 🔥 👉 React Native Pro Course Waitlist: https://jsm.dev/creative25-reactnative 👉 Backend Pro Course Waitlist: https://jsm.dev/creative25-backend 👉 AI Development Pro Course Waitlist: https://jsm.dev/creative25-aidev 👉 Tailwind Pro Course Waitlist: https://jsm.dev/creative25-tailwind 👉 React.js Pro Course Waitlist: https://jsm.dev/creative25-react ⚠ Links not working? → If you're in Nigeria, you'll have to use a VPN due to regional restrictions. ⚠ If something mentioned in the video isn’t listed here or a link is broken: → contact support@jsmastery.pro Rate us on TrustPilot: https://jsm.dev/trustpilot https://discord.com/invite/n6EdbFJ https://twitter.com/jsmasterypro https://instagram.com/javascriptmastery https://linkedin.com/company/javascriptmastery Business Inquiries: contact@jsmastery.pro Time Stamps: 00:00:00 — Introduction 00:05:35 — #1 GSAP Cocktail Website 00:09:03 — GSAP Workshop 00:36:32 — Project Showcase 00:37:46 — App Setup 00:52:32 — Navbar 01:04:47 — Hero Section 01:17:50 — GSAP Hero Video Animation 01:31:47 — Cocktails Section 01:41:55 — About Section 01:52:05 — Art Section 02:03:50 — Menu Section 02:23:15 — Contact Section — 02:33:33 — #2 ThreeJS Crash Course 03:07:05 — ThreeJS Practical Demo 03:36:15 — React Three Fiber & Drei — 03:50:56 — #3 3D Apple Website 03:54:12 — Hostinger Setup 03:57:05 — App Setup 04:05:40 — NavBar 04:15:17 — Hero Section 04:20:02 — Product View 04:33:27 — Model Rendering 04:40:12 — Lights 04:45:29 — Model Switch 05:07:36 — Showcase Section 05:25:15 — Performance Section 05:39:43 — Features Section 05:57:13 — Highlights Section 06:03:46 — Footer 06:10:01 — Deployment — 06:12:50 — #4 3D Portfolio 06:18:40 — Create React.js Project 06:25:59 — Install and configure TailwindCSS v4 06:34:19 — Hero Text & Layout 06:50:15 — Hero 3D Model 07:22:00 — Title Animation, Scroll, and Counter 07:34:36 — Showcase 07:47:38 — Navbar 07:55:45 — LogoShowcase 08:00:56 — FeatureCards 08:06:34 — Experience 08:38:48 — TechStack 08:58:53 — Testimonials 09:07:35 — Contact 09:29:01 — EmailJS Integration 09:37:02 — Footer 09:42:44 — Deployment

About This Video

So you want to become a creative developer who builds modern apps people actually remember—the kind of sites that make you stop mid-scroll. In this 10-hour Creative Frontend course, I walk you through a complete learning journey to master GSAP and Three.js (with React), without wasting days bouncing between tools, setup tweaks, and WebGL errors. We start with a fast-paced, hands-on GSAP crash course where I break down the core methods (to, from, fromTo), timelines, stagger, ScrollTrigger, and text animations—plus the pro tips and common beginner mistakes that usually slow people down. Then we put the theory where it belongs: inside real projects. You’ll build a Mojito Cocktails landing page packed with scroll-triggered animations, immersive parallax effects, and silky smooth transitions. After that, we level up with an Apple-style MacBook Pro landing page clone, focusing on real Three.js implementation in React using React Three Fiber and Drei—cinematic hero sections, scroll-synced storytelling, photorealistic 3D models, masked video, and performance-first responsive design. Finally, you combine everything into a portfolio website with a 3D room, bento-grid projects, animated timeline, interactive tech cards, testimonials, and a functional contact section—so you’re not just watching a tutorial, you’re shipping apps that can actually get you hired.

Frequently Asked Questions

🎬 More from JavaScript Mastery