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
/ discord / jsmasterypro / javascriptmastery / 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
