I usually don't write these comments, but this is by far the best coding tutorial I've seen in a while. Not rushing and explaining everything in detail leaving time to actually understand whats happening. Thanks! Earned a sub!
I find your style very calming. Because the font is very small it really forces me to focus and not be overwhelmed. Thank you so much for the tutorials.
Leaving a comment at the 3rd minute just to commend you for your teaching method, really helps to anchor what you're teaching in mind...should make everything eventually easier to grasp and replicate/improve/propagate. Thanks.
The way you explain the little things, its amazing 🔥. Your content is GOLD. Thank you so much ❤. If, you have time, keep uploading to us, specially those html css js gsap videos.
I stumbled on your channel yesterday. What a goldmine. Channels such as this are a rare gem. Too bad this tutorial is not nextjs focused, but as I read in the comments you will do that. I do think that AAA tutorials doing Award winning techniques in next will bring the correct crowd to your channel. All the best!
@@danielhultcodes You are welcome + no pressure. I truly mean this. I come from a Flash background and have used gsap since the very early days. Making the transition to html was hardcore. So I really applaud people who can teach, and thats a gift you have. Calm, detailed and explaining what you do. Top! All the best!
@@code.design Man, thanks so much again. I really appreciate the words! So cool that you have even the Flash background - there were a lot of awesome stuff being built back then! I can imagine the transition to be hard for sure. All the best to you too! 🙏🏻
Excellent work! By the way, smooth scrolling is built into gsap. You just have to set scrub to a number. 'scrub: 1' would make scroll events take 1 second to complete, creating a smooth scroll effect.
That is true, but it’s only for the elements that you’re animating. Their smoothScroller is a smoothscrolling plugin though! I just prefer Lenis because it doesn’t interfere with the native scroll and stuff like position sticky etc.
Hello. Thanks very much for this tutorial. Great work. Just keep doing what you are doing. Could you just increase the font of you text editor, it's a bit difficult to se the code. Thanks and once more thanks so much for this 🙏🙏
Hi, thanks for an amazing tutorial, one question. When using Gsap I often get shaky performance in Chrome like the script does not always load, jaggy animations and so on. I guess most of it is to blame that I have not set the initial state for items before animating them. But do you have any general tips if you are for example building a scrolling image gallery with zoom function. Should you then some how preload the images, set the scale of each or? Any tips are most appreciated.
Can you do more of the scroll based website animation with GSAP? If you could do it with React (or Next.js or something similar) would be absolutely incredible 👌 Might be a video idea for you but you can try to recreate something like an AWWWARDS replica 👏👏👏
@@danielhultcodes bro can you please convert this code for a react website please I'm in need of it , please make a video or give me your code of it , I'll be very grateful to you brother 🙏. ~ Your UA-cam fan
The content is initially marked with an arrow. That's not the best. Please tell us _createHero() { const tl = gsap.timeline(); this.heroImages.forEach(image ) }
I usually don't write these comments, but this is by far the best coding tutorial I've seen in a while. Not rushing and explaining everything in detail leaving time to actually understand whats happening. Thanks! Earned a sub!
That means a lot! Thank you 🙏🏻
I find your style very calming. Because the font is very small it really forces me to focus and not be overwhelmed. Thank you so much for the tutorials.
Thank you for watching!
Great tutorial man! You explained things nicely. Looking forward to more of your content!
Exactly what I was looking for, please keep doing videos like this. Especially the techniques and processes. Thank you!
Thanks man! It motivates me to hear that 🤌
Leaving a comment at the 3rd minute just to commend you for your teaching method, really helps to anchor what you're teaching in mind...should make everything eventually easier to grasp and replicate/improve/propagate. Thanks.
Thanks a million brother! It helps so much with my GSAP learning!!!
The way you explain the little things, its amazing 🔥. Your content is GOLD. Thank you so much ❤. If, you have time, keep uploading to us, specially those html css js gsap videos.
Thank you! I’m glad you found the video helpful 🙏🏻
Hi Daniel, Amazing Tutorials Please keep making this kind of videos
I'm sure UA-cam will push this videos eventually.
Thank you , Please keep making other videos
Thank you very much for this very detailed tutorial, wish I had found you before
this is awesome!! i was looking like this for long time, thank you so much :)
I stumbled on your channel yesterday. What a goldmine. Channels such as this are a rare gem. Too bad this tutorial is not nextjs focused, but as I read in the comments you will do that. I do think that AAA tutorials doing Award winning techniques in next will bring the correct crowd to your channel. All the best!
Thank you so much for the kind words man! I’m planning on doing more Next/React projects covering these techniques + more very soon 🙏🏻
@@danielhultcodes You are welcome + no pressure. I truly mean this. I come from a Flash background and have used gsap since the very early days. Making the transition to html was hardcore. So I really applaud people who can teach, and thats a gift you have. Calm, detailed and explaining what you do. Top! All the best!
@@code.design Man, thanks so much again. I really appreciate the words!
So cool that you have even the Flash background - there were a lot of awesome stuff being built back then! I can imagine the transition to be hard for sure.
All the best to you too! 🙏🏻
Love what you do, please don't ever stop these videos. If you'd create a video about your journey as well, that would be really cool.
Thank you man! I really appreciate that 🙏🏻 I will definitely create more personal videos after a while.
Bro, you are so good at what you do. I really admire your work. Amazing! Love your creativity with the animations as well!!
Wow, thank you so much bro!! 🙏🏻
Thanks for this very detailed tutorial. Very nice 😀
Thank you 🙏🏻 Glad you liked it!
This was really informative and I enjoyed the process
Excellent work! By the way, smooth scrolling is built into gsap. You just have to set scrub to a number. 'scrub: 1' would make scroll events take 1 second to complete, creating a smooth scroll effect.
That is true, but it’s only for the elements that you’re animating. Their smoothScroller is a smoothscrolling plugin though! I just prefer Lenis because it doesn’t interfere with the native scroll and stuff like position sticky etc.
You are awesome bro. ❤ you deserve 1 M + subscribers 🎉
great! Thanks!
nice tutorial. what font are you using for your text editor?
Hello. Thanks very much for this tutorial. Great work. Just keep doing what you are doing.
Could you just increase the font of you text editor, it's a bit difficult to se the code.
Thanks and once more thanks so much for this 🙏🙏
thanks for the great videos
Glad you like them!
i like it! thanks!
You're very welcome bro 🙏🏻
Really nice video bro +1
Thank you!
Learned lot of stuff through your videos ❤. Don't stop, just increase fontsize please.
Thank you so much!
Thanks a lot❤❤❤
Hi, thanks for an amazing tutorial, one question. When using Gsap I often get shaky performance in Chrome like the script does not always load, jaggy animations and so on. I guess most of it is to blame that I have not set the initial state for items before animating them. But do you have any general tips if you are for example building a scrolling image gallery with zoom function. Should you then some how preload the images, set the scale of each or? Any tips are most appreciated.
@oscarcarlen5952 maybe checkout the CSS property "will-change". It should stop laggy, flashing behaviour
Thanks a lot. +1 sub🥳
good jobbb
is lennis only for the smooth scrolling? the animations is with de GSAP
Can you do more of the scroll based website animation with GSAP? If you could do it with React (or Next.js or something similar) would be absolutely incredible 👌
Might be a video idea for you but you can try to recreate something like an AWWWARDS replica 👏👏👏
Thank you! I will cover this in React too soon 👨🏻💻
GSAP SplitText should do that but it's a paid plugin
in GitHub your index.js file is empty, why?
The github repo is only a starter! I want people to follow along and not just copy the code. Hope you understand!
@@danielhultcodes bro can you please convert this code for a react website please I'm in need of it , please make a video or give me your code of it , I'll be very grateful to you brother 🙏.
~ Your UA-cam fan
Brother I was talking about this bring full website with animation..... other thing is provide figma link in each video
Thank you! I will try to include more assets for videos in the future 🙏🏻
@@danielhultcodes yeah and please start coding from scratch
you can share you figma design file
17:04 Lenis doesn't work.. console says 'Uncaught ReferenceError: smooth is not defined' :P
Hi, i have the same problem, i followed this tutorial a few months ago and it went great, but then suddenly stopped working
I just used their latest import and followed their docs, worked fine this way.
Code not clear
the texts seem like ants, no way to read
Sorry about that!
Can you can do these in react and next? 🥹
Yes, will put out React and scroll animations later 🙏🏻
The content is initially marked with an arrow. That's not the best. Please tell us
_createHero() {
const tl = gsap.timeline();
this.heroImages.forEach(image )
}
Not sure what you mean. Could you provide more info?