When Next.js Met GSAP
10:52
Күн бұрын
Пікірлер
@ab.jihan12
@ab.jihan12 4 сағат бұрын
best
@dipongkorroydipu1613
@dipongkorroydipu1613 9 сағат бұрын
make page transition effect ,i mean first loading
@MarceloCIGramajoFeijoo
@MarceloCIGramajoFeijoo 23 сағат бұрын
Amazing! I'm following every step but instead of the word I can only see a small black cube. Everything is as you have it, it can be something related with Next.js?
@editxswajal
@editxswajal Күн бұрын
Can u make tutorials on shaders?
@shadowslayer2248
@shadowslayer2248 Күн бұрын
Wow didn't understand a thing in THREE JS but end result felt epic! Can you please create a course or long video on shaders, Three JS and stuff?
@ahmaddaani_
@ahmaddaani_ Күн бұрын
I'm waiting for the tutorial with React JS or Next JS in all the videos 🙌
@codegrid
@codegrid Күн бұрын
👍🏼
@spacebuddy5339
@spacebuddy5339 2 күн бұрын
Just when the world needed him
@codegrid
@codegrid Күн бұрын
🙏🏽
@fokspoks
@fokspoks 2 күн бұрын
but isn't uncomfortable to use next with framer motion or gsap since they're demanding to turn file into client side one. and to bypass this we have to create another client side components for animation and use it in server side file and etc. In react you don't usually think about ssr, but if you're using next that means you want to have as much of server side components as possible
@rayhankessal6976
@rayhankessal6976 2 күн бұрын
let's fk go
@codegrid
@codegrid 2 күн бұрын
🚀
@mhalwasoffice6132
@mhalwasoffice6132 2 күн бұрын
was is the theme name ?
@codegrid
@codegrid 2 күн бұрын
Material Theme Ocean High Contrast
@theman7050
@theman7050 2 күн бұрын
Plz stick with js stuff. Its easier to follow along
@codegrid
@codegrid 2 күн бұрын
That won’t be possible! Most of the people are interested in exploring new territories along with the JavaScript videos.
@imzyren
@imzyren 2 күн бұрын
The website itself was made by aristide benoist using native webgl without libraries. He's really a beast 💪
@codegrid
@codegrid 2 күн бұрын
💯
@devoxygen7395
@devoxygen7395 2 күн бұрын
Level
@codegrid
@codegrid 2 күн бұрын
🙏🏽
@renewinther1318
@renewinther1318 2 күн бұрын
Love that page transition even more 🔥 sad it is not a part of the code 😢
@codegrid
@codegrid 2 күн бұрын
I’ll give it a shot!
@Way_Of_The_Light
@Way_Of_The_Light 2 күн бұрын
Sick mate 🙌✨ the channel has upgraded 😮‍💨
@codegrid
@codegrid 2 күн бұрын
Thanks! 🙏🏽
@i_k0stin
@i_k0stin 2 күн бұрын
See shaders. Put likes. Simple! 🔥🔥🔥
@codegrid
@codegrid 2 күн бұрын
😉
@kartikeypandey7711
@kartikeypandey7711 2 күн бұрын
Alright, I'm just gonna ask this... Where did you learn Reverse Engineering from? You can DM me your little secret, I won't tell anyone, I promise 😛 Btw, totally love your videos❤
@codegrid
@codegrid 2 күн бұрын
Haha! There’s no specific way to tackle these experiences bro. At least to me. I’m still VERY new to this so just trying to put the pieces together, anything I find online, from wherever I can and see if I can build something out of it.
@VIKASYADAV-mr7kr
@VIKASYADAV-mr7kr 2 күн бұрын
Recently discovered him and bro seriously he is ahead of time🗿
@codegrid
@codegrid 2 күн бұрын
🙏🏽
@CodeX-xyxy
@CodeX-xyxy 2 күн бұрын
man your accent is unbearable. you are using very old shader syntax btw varying is deprecated glsl shader keyword instead we use "in" and "out" keywords
@codegrid
@codegrid 2 күн бұрын
😂
@samuelurbaneja_
@samuelurbaneja_ 2 күн бұрын
If it wasn't because he's making an effort in making these videos in english, so more people can learn proper web animations, you wouldn't have access nor possibility of understanding the walkthrough. He's speaking english not because it's the only language that he speaks, but because it's the only language that we can understand. Be more grateful, just saying :)
@CodeX-xyxy
@CodeX-xyxy 2 күн бұрын
@@samuelurbaneja_ hes old videos are AI generated and very clean.
@shadowslayer2248
@shadowslayer2248 Күн бұрын
Says probably a native english speaker whose accent you'd need subtitles to understand. As far as the majority of people are concerned, all the words are clear and easy to understand when he speaks and if you're actually here to get some value, you'd turn on auto generated CC and understand what u couldn't instead of telling someone to change their style.
@julianvelez6563
@julianvelez6563 2 күн бұрын
awesome work bro
@codegrid
@codegrid 2 күн бұрын
Thanks bro
@Aman_yadav1419
@Aman_yadav1419 2 күн бұрын
Amazing 🎉
@codegrid
@codegrid 2 күн бұрын
Thanks!
@sujoykrhaldar
@sujoykrhaldar 2 күн бұрын
Can you make a video on page transition animation just like this website. like URL changes but for some time I can see prev pages content and then some animations
@codegrid
@codegrid 2 күн бұрын
I can give it a shot!
@lakshya5946
@lakshya5946 2 күн бұрын
Can you make a tutorial on how to reverse engineer these animations?
@codegrid
@codegrid 2 күн бұрын
Nope. I don’t have any specific way towards tackling these experiences and it differs from project to project! I’d rather stick to sharing the approach. 🙏🏽
@lakshya5946
@lakshya5946 Күн бұрын
@@codegrid The how you learn/recreate the animation you see on any awwwards website. You just told us in tutorials that how you made it, but not how you got to know that thing by yourself from looking at website and how you inspected it.
@divi1223
@divi1223 5 сағат бұрын
Oh you mean inspecting a website and understanding how it was made?
@divi1223
@divi1223 5 сағат бұрын
That would be cool
@lakshya5946
@lakshya5946 4 сағат бұрын
@@divi1223 Yes! But He Refused To Make It!
@ailofimaster
@ailofimaster 2 күн бұрын
Can You please reply to this comment and tell what themes and font you using i really like the and want to install
@qiaozou4826
@qiaozou4826 2 күн бұрын
Codegrid never disappoint
@Pouncedd
@Pouncedd 3 күн бұрын
I don't think it's good to have separate renderer/canvas for each image, as it's pretty resource expensive. It would be better to have one fixed canvas and synchronise the webgl elements position and sizes with scroll
@codegrid
@codegrid 3 күн бұрын
Got it! Thanks for the suggestion.
@haroldhankerchief6056
@haroldhankerchief6056 4 күн бұрын
please no more music
@musterion25
@musterion25 5 күн бұрын
Amazing! More Next js + GSAP please🙏
@alphaalum6903
@alphaalum6903 5 күн бұрын
i am more intrested in the intro animation xD pleas explain that code
@aryanbhargav1755
@aryanbhargav1755 5 күн бұрын
BRo i say make a complete course on it........this video is so great 🔥🔥🔥🔥🔥🔥🔥🔥
@swasthikk9556
@swasthikk9556 5 күн бұрын
Bro Please do one Video about how to integrate lenis smooth scroll in react project for any routes and components .
@swasthikk9556
@swasthikk9556 5 күн бұрын
Bro Please do one Video about how to integrate lenis smooth scroll in react project for any routes and components .
@Tri-dimensional
@Tri-dimensional 5 күн бұрын
Please! Can you Create this slider using Scroll ?
@16CXx
@16CXx 5 күн бұрын
The video editing is amazing brother… keep it up cuz it develop the video quality sooooo hight 🔥
@codegrid
@codegrid 5 күн бұрын
Thanks!
@zaidgaming1881
@zaidgaming1881 6 күн бұрын
make a page transition in nextjs and gsap
@codegrid
@codegrid 6 күн бұрын
Will give it a try
@zaidgaming1881
@zaidgaming1881 6 күн бұрын
@@codegrid 😍waiting
@CraftingSkilzz
@CraftingSkilzz 5 күн бұрын
Oh man been struggling with this one for a couple days, if you could please take the back/forward buttons into account too 🙃
@razorjhon2622
@razorjhon2622 6 күн бұрын
Best youtuber !!!!!!
@beteer1120
@beteer1120 6 күн бұрын
thanks for this, if i may ask, what's the second argument used for ?
@beteer1120
@beteer1120 6 күн бұрын
is it for duration ?
@andrejkling3886
@andrejkling3886 6 күн бұрын
Excellent content... 🔥 thank you
@codegrid
@codegrid 6 күн бұрын
Glad you liked it!
@rubenzafratraver6819
@rubenzafratraver6819 6 күн бұрын
this is very cool but would be dope like in the other page, that you can click on one and like "transition" inro full page with its own scroll, but this itself is amazing thanks!
@codegrid
@codegrid 6 күн бұрын
I’m going to give it a shot! Thanks
@Kairos26
@Kairos26 6 күн бұрын
what is your vscode theme?
@codegrid
@codegrid 6 күн бұрын
Material Theme Ocean High Contrast
@rayhankessal6976
@rayhankessal6976 6 күн бұрын
Nice shit bro, gsap provides a hook useGSAP to handle all your animation (performance and context cleaning), also there is a utility function from gsap toArray
@codegrid
@codegrid 6 күн бұрын
I know. If you check out the previous NextJS videos, I have used that hook there. But for this use case, I don’t think it was needed! So I kept it very basic which could get the job done!
@treyrader
@treyrader 6 күн бұрын
this comment needs to be upvoted and pinned to the top. Imperative to know if you dare to have the balls to use gsap with react in production. lol
@rayhankessal6976
@rayhankessal6976 6 күн бұрын
@@codegrid nice
@0O0day
@0O0day 6 күн бұрын
Yes! more Next, thank you
@codegrid
@codegrid 6 күн бұрын
🙏🏽
@mr.fabian8471
@mr.fabian8471 6 күн бұрын
i love you man !!!!
@codegrid
@codegrid 6 күн бұрын
❤️🙏🏽
@VIKASYADAV-mr7kr
@VIKASYADAV-mr7kr 6 күн бұрын
Goat 🐐
@codegrid
@codegrid 6 күн бұрын
🙏🏽
@Aman_yadav1419
@Aman_yadav1419 6 күн бұрын
Amazing 🎉
@codegrid
@codegrid 6 күн бұрын
Thanks!
@JustRayzen
@JustRayzen 6 күн бұрын
More Next.js and GSAP! Thats what we Need… Nice Video!
@codegrid
@codegrid 6 күн бұрын
More to come!
@ayezeal6058
@ayezeal6058 6 күн бұрын
Finally the next x gsap content I have been looking for
@codegrid
@codegrid 6 күн бұрын
You got it!
@treyrader
@treyrader 6 күн бұрын
@@codegrid tellin it bro. you're gonna blow up if you keep it up
@codegrid
@codegrid 6 күн бұрын
@treyrader I’ll try to keep posting these! Thanks
@donirizki2717
@donirizki2717 6 күн бұрын
I hope this KZfaq Chanel will have tutorials on webgl shader animation such as webgl slider or Carousel animation.
@vinu3065
@vinu3065 6 күн бұрын
PLz make a tutorial that we have a button or image gallery or any animation and we make such a code through which we again and again use this with simple one line Reply plz
@matthewcui7870
@matthewcui7870 6 күн бұрын
love the creativity, always