Smooth Scroll, Scroll Trigger and Reveal Effect with Locomotive Scroll, GSAP & React Part 1

Check out the tutorial and become more creative!

Just fork to have the starter project

Social Links:

Yes, that's quite a lot of technologies into a tutorial, but don't worry it's not complicated, in the end, folks who are creating awesome websites don't limit themselves to just a single web technology, don't they?.

We will use 3 technologies, Locomotive Scroll to have a smooth juicy scroll, GSAP to create our scroll-triggered horizontal scroll & text-based animation, and in the end, Intersection Observer to animate some pictures that are getting into the viewport.

New to the channel?
Hey there my name is Nicu, I am a Front end developer.I'm here mainly because of lack of creativity and hopefully to educate people on how to code projects that actually look good. If you have any suggestions on tutorials you would like to see feel free to DM me :)

#awwwards #gsap #locomotive

[webunlocked]

Hey guys.

I updated the github repo with the new update code. Everything is tested and should work properly now!

[webunlocked]

This is Part 1 only for now.
We set up the project's structure, so it's mostly only React & SCSS.

The rest of the video coming up till the end of the week.

[AryanRajSinha]

Your websites and tutorials are awesome and easy to understand!! Just one suggestion though... If possible, please try to add timestamps so that it's easier to keep a track of at what time will you be working on which element.

Keep up the good work!!

[razorjhon]

when i saw the intro i subscribed and i will watch your videos man, this is amazing thank you so much for this video ♥♥

[alebuda]

finally!!! i was waiting! thanks for your tuttorials!

[Cav]

Thank you for taking the time to make this tutorial. It honestly amazing and so helpful

[diofaro]

This videos are awesome, thanks for helping us to be better front-enders!

[iviixio]

This is very well structured & coded 💙

[DK-lqkr]

I love this tutorial. It's easy to understand and follow. I am wondering if you also have a tutorial video of the CustomCursor you are using in this project?

[LQS]

Thank you man! I'm looking forward to the whole series <3

[marcelnunez]

This is gonna give me a job, I feel it

[potantirittisak]

Great video! thank you, also please increase the mic volume for future videos as it's quite low.

[changecollar]

Alaways looking for your next project and video.. I highly appreciate you ideas to get a video..

[magdasok-fi]

hey, which exactly tutorial should I use to recreate this wonderful custom cursor? thanks

[maisoncastro]

When I downloaded the starter pack, there were lots of aspects missing. I'm guessing I'll have to add everything one by one?

[webunlocked]

Would be so cool if you scrolled back up and smashed the like button! Love you

[abatibabatundedaniel]

Hey, tried using what i learnt from this video to build something cool, but i keep having build issues trying to deploy it on vercel and netlify.

[webunlocked]

Hi
The rest of the video is recorded and ready for post-production.
Would you want it to be divided into a huge Part2 or Part 2 and Part 3?

If latest then for Part2 we would integrate Locomotive Scroll and GSAP's SplitText, and for part3 we will learn how to use Scroll Trigger in harmony with Locomotive Scroll. }

What do you think would be the best for you?

[АлександрМелянюк-цю]

Thank you! Where can I get a starter template?

[shubhammetkar]

Hi!!
Could you have a short video on building awwwards logo animation which we see when scrolling on their official website?
Thanks in advance!😀