Scroll Animations with JavaScript | Smooth Scrolling, GSAP ScrollTrigger & Parallax

In today's video we are animating a small landing page with scroll animations. We'll cover smooth scrolling with Lenis, parallax effects and pinning sections. Hope you like it!

Here is the starter repo if you want to code along:

[ceateio]

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!

[mayainfi]

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.

[ke]

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.

[ganieldago]

Exactly what I was looking for, please keep doing videos like this. Especially the techniques and processes. Thank you!

[balmaraz]

Great tutorial man! You explained things nicely. Looking forward to more of your content!

[htooaungglwinn]

Thanks a million brother! It helps so much with my GSAP learning!!!

[CXx]

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.

[phme]

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.

[dthierno]

Bro, you are so good at what you do. I really admire your work. Amazing! Love your creativity with the animations as well!!

[misaellossantos]

this is awesome!! i was looking like this for long time, thank you so much :)

[code.design]

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!

[bhupendrajaiswal]

Hi Daniel, Amazing Tutorials Please keep making this kind of videos

I'm sure Youtube will push this videos eventually.

[knevari]

Thank you very much for this very detailed tutorial, wish I had found you before

[khalidahammed]

This was really informative and I enjoyed the process

[ИринаСвятецкая-хе]

Thanks for this very detailed tutorial. Very nice 😀

[codewithshahruk]

You are awesome bro. ❤ you deserve 1 M + subscribers 🎉

[aliventurous]

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.

[zakariabouzangad]

Thank you, Please keep making other videos

[tosinakerele]

nice tutorial. what font are you using for your text editor?

[oscarcarlen]

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.