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

[@webunlocked]

Hey guys. I updated the github repo with the new update code. Everything is tested and should work properly now! github.com/nicubarbaros/youtube-tutorials-repo/tree/master/scroll-trigger

[@webunlocked]

Long waited part 2. Enjoy 🤘🏽

[@tinotaylor]

My account seemed to have gotten rid of my comment but I saw the message in notifications. Thanks for the tip nicu. I'll give it a try 🙂👌🏼

[@lynx7077]

Very impressive and interesting concepts. As someone who is fresh in this field, i am keep discovering so many new technologies every day. They might feel very overwhelming sometimes, thinking, "how i am supposed to learn all these new trends while i am still learning React" but at the same time its so exciting to know that one day i am gonna be able to use all these impressive animations and skills. PS: A nice idea would be if you could make a nice portfolio based on these amazing animations. Thank you for your guide!

[@gostgamming7126]

WOW THIS IS SOO AMAZING HAVENT SEEN THIS TYPE OF STUFF EVER EVEN IN PAID COURSES!😲

[@magdasokolovic]

love this layout. So looking forward to use it for my another project :)

[@webunlocked]

Happy to hear that Magda!

[@emmancruz6112]

Im gonna stream all your projects for the whole month, another fav teacher

[@websitedesigndevdeploy]

This is so amazing! Nicu. I like it.

[@webunlocked]

Thanks Thomas!

[@opajobioyegokeoyebola1014]

do you recommend using gsap scrollTrigger instead of the intersection observer, code feels ambiguous with it

[@mirage4731]

Underrated channel ❤️

[@andikafebrianto4021]

The galleries jumping from 1 to 4, been try and follow the code but still now working.

[@dawn6455]

it was too hard to follow after about section because theres too much going on. Maybe its just me cuz im junior. U could do all these with scrolltrigger (image/text reveal) and trigger would be sections. It would be much easier in my opinion. Thanks for the tutorial anyway i learned a lot

[@leb8580]

Aside from the super interesting video that mouse cursor is dope. Where do I find the video where you build it?

[@webunlocked]

The logic can be found here kzbin.info/www/bejne/pKfLf6Nodpibrqs

[@TheIguana3d]

Hi how are you? Thank you very much for sharing this video, as this will help me better understand gsap and create more effects.

[@webunlocked]

I am amazing, how are you? Thank you

[@FacundoTroitero]

Hi I've been using this to create a portfolio to great success. However, I couldn't implement anchor links. The moment I click on one, the whole app explodes. I'm guessing this is related to locomotive scroll? Did you have to deal with this issue as well?

[@craigmutugi5651]

i am getting this error Module not found: Error: Can't resolve 'locomotive-scroll/src/locomotive-scroll.scss'

[@karnan1364]

If I deployed this website, scrollTrigger is not working. Only first item is showing and rest of place become empty. why it is happening?

[@razorjhon2622]

I have a question please why do you use locomotive-scroll and not the react version of it ? also can you update this video to the react version because i cannot find it else where

[@webunlocked]

Hey razor, I'm not sure its gonna work with react locomotive scroll, because we have to register the the locomotive scroll to the scroll trigger plugin.

[@chideraugo6878]

amazing content, man. thank you. please, in a real situation how would you check if the images on your page have loaded before you disable the preloader?

[@webunlocked]

Thank you so much. Its easy with plain JS to make it, create an Image object through JS and it has a call back function for loaded, but to avoid all that work I would use an npm package, and I did (in the last video on this channel), called imagesloaded that gives us an elegant way to do it!

[@OnlyJasiel]

Here is a simple example using JQuery: //body class and add preloader-site class $(document).ready(function($) { var Body = $('body'); Body.addClass('preloader-site'); }); //when content is loaded -> delete preloader-site and fadeOut preloader $(window).load(function() { //.fadeOut("number" ms -> change duration) //.fadeOut("slow") -> slow fade out $('.preloader-wrapper').fadeOut(); $('body').removeClass('preloader-site'); }); also add this so the user can't scroll while the preloader is active: body.preloader-site { overflow: hidden; }

[@webunlocked]

@@OnlyJasiel jquery its not used anymore into modern web development so I would advice to drop it and use native js or ant other library

[@OnlyJasiel]

@@webunlocked yeah, it can be made with native js, I had that example with JQuery already done that’s why I commented it.

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

You are the best! Thank you!

[@VforVasile]

was waiting for it ;) thanks

[@sebastianmihaiprisacariu8975]

Awesome. Did you use react-locomotive-scroll? Would be great to see a tutorial using that too. :)

[@webunlocked]

Nope. I'm using my own custom hook (not sure if I did for this video)

[@dazai9015]

Should I use react-locomotive-scroll ?

[@Enigma31]

Thanks for amazing content. I had to export default SplitText in split3.min, it’s working in pre prod, but in prod with netlify I’ve got an error « SplitText is not defined » do you have any idea why ?

[@tce1867]

Hi guys, could you show me how to export default SplitText in split3.min? Im keep getting Uncaught SyntaxError: The requested module '/src/utils/Split3.min.js?t=1702556585312' does not provide an export named 'default'

[@ivansmiths1388]

Hey! Really great content.Anyway i'm facing a problem, i'm removing the loader(the one with the timer) but If i do that, the images and the gallery stops working! It's a really strange problem, do you have an idea? Thanks in advance

[@killerpopholly4054]

Hey did U found out ??

[@ivansmiths1388]

@@killerpopholly4054 unfortunately not

[@killerpopholly4054]

@@ivansmiths1388 ok thanks dude

[@jyst83]

Oooh just hit the jackpot with this channel! 😍 'Liked' 'Subscribed' 'Bell button'

[@webunlocked]

Welcome aboard!

[@codewithhazem]

I am extremely grateful! Thank u very much! ❤❤

[@webunlocked]

Thank you Hazem for watching yet another video!! You push me forward!

[@Ajay-cb2tc]

where is the first part?

[@remicrce8481]

Edit : the gallery slider doesn't work for me... Sad but thank's for the huge rest part 🚀

[@ilearncode7365]

Why is that timer so convoluted? Wouldnt this work just as well? useEffect(()=>{ let interval = setInterval(() => { setPreloader(false) }, 3000); return ()=> clearInterval(interval) },[])

[@IntoAllGames]

You tell me… did it work?

[@webunlocked]

With your code. the interval will run infinitely with an interval of 3 seconds or until the component will be unmounted. Yes its gonna work but if you put a console log inside interval you will see that it is called. You probably should check if preloader is true you set it to false. probably my solution was made to have a counter to be displayed, but probably never happened.

[@leularia]

why are we not even using setTimeout

[@johncaballero5463]

@@leularia i did const [preloader, setPreloader] = useState(true); useEffect(() => { console.log("set timer"); setTimeout(() => { setPreloader(false); console.log("set timer"); }, 3000); clearTimeout(); }, []);

[@comiatimarius9846]

This was very helpfull!

[@rogerreyes4470]

This is awesome. Woow man! Great job!

[@webunlocked]

Thanks!!!!

[@amanmool5254]

Awesome

[@narayadewe7979]

13:11 18:27 29:00 32:42

[@remixowlz]

really amazing tutorial!!!!

[@Forsvinne77]

Good stuff, keep it up!!!

[@sumukhakb2701]

Great video, I implemented smooth with my WordPress website, and it is working fine. But position fixed is not working(I want navbar to be fixed), how I can do that?

[@webunlocked]

are you sure everything is as you mentioned? Usually, it should work position fixed and the navbar should've stayed on top. Perhaps you gotta say to the container that you have to go from left to right (full width)

[@mihawkace7676]

make sure you dont have any "overflow: ..." variable set on any parent"s css

[@QuddosSaoudi]

Hey Nicu, I think there’s an issue with the Gallery section, whenever I scroll through it doesn’t display the photos or scroll horizontally, it scrolls vertically directly to the footer and ignores that section, did anyone face the same issue?

[@webunlocked]

its something to do with the scroll stop plugin and locomotive scroll for sure. can you push to a public repo and give me the link? you can DM me on twitter

[@QuddosSaoudi]

Unfortunately I don’t use Twitter, but I’ll be happy to provide you with the link here. (PS: KZbin doesn’t allow external links to be shared in the comment section, so I’ll just paste you the path) /quddossaoudi/photographer

[@webunlocked]

@@QuddosSaoudi Got it. I'm gonna look into it

[@webunlocked]

Hey man sorry for the late response. I updated the code, it should work. I've tested github.com/nicubarbaros/youtube-tutorials-repo/tree/master/scroll-trigger

[@QuddosSaoudi]

Thanks Nico, I greatly appreciate it

[@Kai-cz7wf]

When I was doing same locoscroll.on just like at 40:47 . It giving error ".on isnot a function" can any one please tell me why..?

[@omnandurkar3490]

Same error message , do you get any solution for that?? if you get please tell me !! I have been trying to install locomotion from past 7 hrs using chatgpt and every possible way but just cant

[@saide3560]

why the horizontal scroll section doesn't work for me?

[@webunlocked]

Are you sure you followed the tutorial step by step? Without any more information I am not sure how to help. I could direct you to check if you update the locomotive scroll after images are loaded

[@saide3560]

@@webunlocked i dont know. i think i did the same. height of gallery section is set to carousel width but it doesn't scroll horizontally i set data-scroll-section for section-wrapper but it didnt help. how can i check if locomotive scroll is updated? if i set scroll-data for gallery items, all of them get "is-reveal" class when section comes to viewport

[@thedyslexicwebdev1654]

41:03 46:28 10:00

[@russelp9666]

hey man love u hehehehhe!

[@isekaiguy9113]

Aaahm... uhhhmmmm, ahhmmm, ammmm... shut up!!

[@webunlocked]

?

[@tce1867]

Great tutorial, i am keep getting"The requested module '/src/utils/Split3.min.js?t=1702556585312' does not provide an export named 'default'", how to fix this? Do you have any ideas?

[@yrew2004]

same error : (

[@pierre-etiennechognard5763]

My last comment didn't work. Amazing m8 ! Very nice work ! Can we have the link for minify version (split3.min.js)? Thanks a lot

[@pierre-etiennechognard5763]

For personal use of course. Just for training

[@webunlocked]

I've updated the video description with a link to a gist file.

[@pierre-etiennechognard5763]

@@webunlocked Thanks a looot!

[@remixowlz]

I cant get the effect 18:29, i tried with overflow: hidden :( .js // content animations tl.from( [introHeadLineFirst, introHeadLineSecond], { duration: 1, y: 44, ease: Power2.easeOut, delay: 0.8, stagger: 0.1, opacity: 0, }, 0.15, "Start" ) .from( introContentP, { duration: 1, y: 20, opacity: 0, ease: Power2.easeOut, delay: 0.8, stagger: 0.1, }, 1.4 ) .from( introButtons, { duration: 1, y: 20, opacity: 0, ease: Power2.easeOut, delay: 0.8, stagger: 0.1, }, 1.6 ); css .home .introduction .title { font-size: 3.5rem; font-weight: 500; line-height: 1.2; max-width: 30rem; margin-bottom: 1rem; overflow: hidden; }