- 8
- 1 707
Pragmattic
United Kingdom
Приєднався 5 жов 2024
Build cool things with React, Next, GSAP, ThreeJS and more!
Code: github.com/prag-matt-ic/pragmattic-tutorials
Code: github.com/prag-matt-ic/pragmattic-tutorials
Dreamy animated GLSL shader background - React Three Fiber + Next.js + Typescript Setup + Code
Creating nice animated backgrounds is tricky. You could explore Houdini APIs, but I think that learning shaders is your way forward...
In this one we'll code a dynamic fragment shader in Next.js, using React Three Fiber.
I’ll cover the React component setup in Typescript, the basics of GLSL, some of the important core functions, importing noise, using an image texture and putting it all together for a stand-out final result: pragmattic-tutorials.vercel.app/
#javascript #react #threejs #gsap #pragmattic
🔗 Resources
Repo on GitHub: github.com/prag-matt-ic/pragmattic-tutorials
Check out the live site: pragmattic-tutorials.vercel.app/
React Three Fiber: r3f.docs.pmnd.rs/getting-started/introduction
Book of Shaders: thebookofshaders.com/
GSAP ScrollTrigger: gsap.com/docs/v3/Plugins/ScrollTrigger/
🔖 Chapters
00:00 Intro
1:26 Setup
6:24 Shader Basics
12:00 What are UVs
18:32 Mix function
22:40 Step and smoothstep functions
26:45 Sin function
30:33 Working with noise
36:05 Adding uniforms and time
42:11 Sampling an image texture
52:20 Finishing touches
🤝 Want help on a project?
Email pragmattic.ltd@gmail.com to start a conversation
In this one we'll code a dynamic fragment shader in Next.js, using React Three Fiber.
I’ll cover the React component setup in Typescript, the basics of GLSL, some of the important core functions, importing noise, using an image texture and putting it all together for a stand-out final result: pragmattic-tutorials.vercel.app/
#javascript #react #threejs #gsap #pragmattic
🔗 Resources
Repo on GitHub: github.com/prag-matt-ic/pragmattic-tutorials
Check out the live site: pragmattic-tutorials.vercel.app/
React Three Fiber: r3f.docs.pmnd.rs/getting-started/introduction
Book of Shaders: thebookofshaders.com/
GSAP ScrollTrigger: gsap.com/docs/v3/Plugins/ScrollTrigger/
🔖 Chapters
00:00 Intro
1:26 Setup
6:24 Shader Basics
12:00 What are UVs
18:32 Mix function
22:40 Step and smoothstep functions
26:45 Sin function
30:33 Working with noise
36:05 Adding uniforms and time
42:11 Sampling an image texture
52:20 Finishing touches
🤝 Want help on a project?
Email pragmattic.ltd@gmail.com to start a conversation
Переглядів: 13
Відео
Dope website header! Scroll controlled image sequence in Next.js. Apple inspired. Plus free code!
Переглядів 1,2 тис.4 дні тому
This type of scroll controlled image sequence can be found on world class sites such as the Apple AirPods Pro landing page. I’ve implemented something similar on a global project for a leading retail brand. Implementing these can really take your web experiences to the next level. If you benefit from me sharing the code or recording this video please give this a thumbs up or subscribe to the ch...
Building the ParallaxX website using the ParallaxX toolkit
Переглядів 1537 днів тому
ParallaxX is an NPM package that I've built to aid you in configuring scroll timeline effects without having to write any CSS or JavaScript. You simply add data attributes to the HTML elements that you want to animate. In this video I'm working on the landing page (Next.js TailwindCSS) whilst explaining how it works. #webanimation #react #pragmattic 🔗 Resources NPM Package: www.npmjs.com/packag...
Apple AirPods Pro 2 website header image sequence in Next.js/React.js. Using GSAP and TailwindCSS.
Переглядів 1608 днів тому
Rendering 3D models in the browser is expensive, and they never look as good as pre-rendered outputs with their soft lighting and shadows. But what about when you want motion? An image sequence is often a good solution - what it lacks in frame-rate, it makes up for in high fidelity. In this video I'l be sharing how I recreated the AirPods Pro 2 header using HTML canvas and GSAP. It’s less chall...
Build an animated cursor with custom hover state - React, Next.js, GSAP, Zustand, Typescript
Переглядів 5311 днів тому
Custom cursors are easy to implement badly, especially in React! There's a common mistake you need to avoid if you want it to be performant (spoiler: don’t set state!) In this video I share how I've implemented a custom cursor on a variety of professional Next.js websites. The final solution is performant and customisable. If you end up adapting the code for your own project, please consider gi...
![Building a smooth animated modal [Next.js, React Transition Group, GSAP, Typescript, TailwindCSS]](http://i.ytimg.com/vi/N5M1_kBxrE4/mqdefault.jpg)
Building a smooth animated modal [Next.js, React Transition Group, GSAP, Typescript, TailwindCSS]
Переглядів 5415 днів тому
Ugly modals are everywhere! In this video I’ll show you how to neatly animate modals or menus in and out of the DOM using React Transition Group, GSAP and TailwindCSS. #javascript #react #gsap #pragmattic 🔗 Resources Repo on GitHub: github.com/prag-matt-ic/pragmattic-tutorials Live Site: pragmattic-tutorials.vercel.app/ React Transition Group: reactcommunity.org/react-transition-group/transitio...
![Infinite scrolling marquee for logos or testimonials [Typescript, Next.js, GSAP]](http://i.ytimg.com/vi/KLruwdU28bw/mqdefault.jpg)
Infinite scrolling marquee for logos or testimonials [Typescript, Next.js, GSAP]
Переглядів 6017 днів тому
Scrolling marquees are a great way to showcase company logos, testimonials or headline text on your website. It's actually quite simple when you know how… so let’s go! #javascript #react #gsap #pragmattic 🔗 Resources Repo on GitHub github.com/prag-matt-ic/pragmattic-tutorials Live Site: pragmattic-tutorials.vercel.app/ GSAP Tween: gsap.com/docs/v3/GSAP/Tween Summary Install dependencies: npm i...
Building a cool animated page nav in React with GSAP ScrollTrigger
Переглядів 6718 днів тому
Build a smooth animated navigation in React using the GSAP ScrollTrigger plugin. Great for landing pages, personal sites or blog articles! #javascript #react #gsap #pragmattic 🔗 Resources Repo on GitHub: github.com/prag-matt-ic/pragmattic-tutorials Live Site: pragmattic-tutorials.vercel.app/ GSAP ScrollTrigger: gsap.com/docs/v3/Plugins/ScrollTrigger/ GSAP ScrollToPlugin: gsap.com/docs/v3/Plugin...
Thanks for all the support on this video. After reviewing the code I've made a few changes which are in the repo main branch now. The 2 ScrollTriggers have been combined into 1 because they use the same trigger element, start and end values. The heading timeline can be created immediately which is more desirable than creating it after animating in, incase a user scrolls before the entry animation finishes! Enjoy!
if you can create a course from beginner of tailwind CSS to basic animation to gsap to thinking of design to this I would buy it . just make it move gradually from basic to advanced but such that we can problem solve these things not just follow you
Thanks for the feedback! I'll think about a suitable project which would help someone go from beginner to advanced, or perhaps intermediate to advanced. I know I skipped over a lot of stuff in this one 😅 how long do you think the course should be ideally?
@@pragmattic-dev 15 hours should be enough
Best in the game!
@@sinasadrzadeh4783 we making progress my friend 😎
Too good. Thanks for this 💯
Looks awesommmmeee! Fun to see the BTS or how this all comes together
Team work makes the dream work!
wow.. amazing! keep uploading..
@@anvrag thanks! I’ve got lots of ideas for future content solving real world challenges ranging from dynamic background shaders to Nexts localisation with Google Sheets :)
@@pragmattic-dev and i am waiting for such content! already subscribed!! hope u grow faster :)
Really nice
Thank you sir!
Very nice!! Extremely useful, just started using GSAP again so perfect timing for this tutorial! Nice one Matt!!!
Thank you Hannah! Let me know if there are any specific topics or components you would like me to make a video on in the future :)