Next JS Scroll Animation That Wows (A GSAP & ScrollTrigger Tutorial)
HTML-код
- Опубликовано: 19 сен 2024
- Learn how to create stunning scroll animations in Next.js using GSAP and ScrollTrigger. We’ll focus on a smooth content reveal with cards that will elevate your web experience!
Source Code: codegrid.gumro...
Inspiration: trionn.com/
Instagram: / codegridweb
Twitter: / codegridweb
Public Discord: / discord
Music from Epidemic Sound.
Thanks for watching!
Don't get all soy about not seeing a bunch of components or that I didn’t split 20 lines into another file. Focus on the logic instead. If you're here for someone obsessed with endless components and best practices, this isn't the place. I share experiments without sweating the boring details you can find on 100s of other channels. If you're looking to validate your "i-build-all-the-components" skills, you’re in the wrong place! "But that's not the pUrPoSe of using Next.js" lmao
You don't need to explain yourself brother. The content is not for them. Your videos are perfect, keep up the good work!
I had to record this video in haste and later realized there’s a potential issue with the page getting horizontal scroll due to the cards extending beyond 100vw. To fix this, apply overflow-x: hidden to the main section. Just be careful not to apply any overflow settings on the body element, otherwise Lenis scroll won’t work. Thanks!
just wow ! especially because you use nextjs
🙏🏽
Really Nice! Some Next.js App Router Tutorials would be a cool Tutorial. Maybe some Awwwards Page Transitions....
Noted!
I checked out some of your videos man really awesome, you own a new subscriber bro
Thank you for including the JS version! Very cool animation 🙏
🙌🏼
thank you for creating also JS version. I love you!
🙏🏽
Thanks wow
Cool… 🔥💯
🙌🏼
animations in next js yayyyyy
🙏🏽
Codegrid never disappoint's ❤
🙏🏽❤️
❤
Thank you so much !!
🙌🏼
I have made this site's replica already!
amazing 🔥👍
Thanks!
So cool. Why don't you use the UseGSAP hook instead of UseEffect?
Used in some of the previous videos. This project was initially built with JavaScript that I later moved to a NextJS build. Since it was working, I didn’t bother to change it much. But I’m gonna use that hook in upcoming projects! Thanks
But nextjs is using ssr, and because of these animations it will be hard to keep content as server side, since yoy have to add use client to use animations
Hi, could you create a video tutorial on how to use these HTML and CSS codes with Elementor? I would really appreciate it since a lot of people use Elementor.
I personally have never used Elementor to build websites, especially using custom code! So I won’t be able to make videos on it! Thanks
Can you make a social page only inn three js like there is one on the sotm on the ice igloo website there socials page is very awesome 😎😎
Will check it out! Thanks
@@codegrid thankskskskmsknskjbkjsxbowudnclsdincwudncowudcn for replying. Bro u are too amazing can we talk or have some chat?
Please make a video on lets us talk animation on this site and bottom animation of flash light
Will check those out! Thanks
bois&gals we eating good
😂
pls do some three js in next js project , i still dont know how to implement them in next js / react js, T.T
Out of my scope 🫠
@@codegrid so sad :( , amazing video though
How do you execute this on a Wordpress website?
You can inject custom JS into Wordpress! Which is going to be the entire useEffect code.
M you please make it html css and js pleaseeee 😢❤
Will do both!
Thanks s s. S s s. S s w
The animations on the inspiration website look nice, but they make my new MacBook 16'' M3 Pro CPU reach 70-78 °C quickly. The web users are not ready for those kinds of intensive animations. Web animations that are too CPU/GPU intensive can negatively impact the user experience and make them leave the website asap. It's okay for 1 time scroll, but not if you have a business that expects to get some traffic to sell products or services. Unfortunately, more and more websites are using unoptimized animations that look outstanding, but perform poorly on most of the user devices. 😟
Bro do you really think nobody knows this? Nobody use these animations on any business/commercial websites. These are just experiments, pushing creative boundaries of what can be achieved with code and potentially can be used on non-commercial projects like portfolio and such engaging web experience for fun. There are so many people who don’t get this. Like we all know the sites you see on Awwwards and such platforms are not built to sell a product or something, they are certainly not designed to cater for commercial purposes. However, thank you for taking time to write all this.
@@codegrid Great! So all those agency sites on the web with heavy animations are just experiments, no real businesses. Good to know!
Nope, not all of them - but many of them. Certainly not the agency websites! But that doesn’t mean they should be considered as “commercial” projects. Not sure if this makes sense to you but cool.
Yet another scrumptious tutorial that instantly makes me exit the video I'm watching and switch to this by Codegrid. This guy is so fucking underrated!
🙏🏽🙏🏽🙏🏽
I don't consider this to be a react/next js project... there are no reusable components made... also please try to use useGsap hook from gsap/react
If you’re interested in learning how to create “components” then this channel is not for you. There are 100s of channels out there that teaches you how to do that. Here, I personally don’t care about making the code optimised and reusable! These are just creative experiments primarily focused on JavaScript! I could have moved that block of code to another component where you can pass the props such as images, content, etc but as I said, that’s not the purpose behind these videos!
Also, I’ve used the useGSAP hook in some of the previous videos, I didn’t see the need to it here! Thanks
@@codegrid i get it.. but theres really no use of making such videos showcasing it as next js when the basic concepts of react are not used… it would be better to keep it plain html, js and css.
@codegrid i appreciate the Next.js and gsap videos, and as you said this isn't a Next.js tutorials channel. Thanks ❤
@rohan7011 I get your point too but I think I’ll keep posting NextJS videos with the same approach - primarily showing how to incorporate basic JS, GSAP and ScrollTrigger in NextJS apps and leave the componentizing to the audience! Thanks for your opinion though.