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
@webunlocked3 жыл бұрын
Long waited part 2. Enjoy 🤘🏽
@tinotaylor3 жыл бұрын
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 🙂👌🏼
@lynx70776 ай бұрын
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!
@gostgamming71269 ай бұрын
WOW THIS IS SOO AMAZING HAVENT SEEN THIS TYPE OF STUFF EVER EVEN IN PAID COURSES!😲
@magdasokolovic3 жыл бұрын
love this layout. So looking forward to use it for my another project :)
@webunlocked3 жыл бұрын
Happy to hear that Magda!
@emmancruz61123 жыл бұрын
Im gonna stream all your projects for the whole month, another fav teacher
@websitedesigndevdeploy2 жыл бұрын
This is so amazing! Nicu. I like it.
@webunlocked2 жыл бұрын
Thanks Thomas!
@opajobioyegokeoyebola10143 ай бұрын
do you recommend using gsap scrollTrigger instead of the intersection observer, code feels ambiguous with it
@mirage47313 жыл бұрын
Underrated channel ❤️
@andikafebrianto402110 күн бұрын
The galleries jumping from 1 to 4, been try and follow the code but still now working.
@dawn64552 жыл бұрын
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
@TheIguana3d3 жыл бұрын
Hi how are you? Thank you very much for sharing this video, as this will help me better understand gsap and create more effects.
@webunlocked3 жыл бұрын
I am amazing, how are you? Thank you
@FacundoTroitero2 жыл бұрын
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?
@craigmutugi56519 ай бұрын
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.
@chideraugo68783 жыл бұрын
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?
@webunlocked3 жыл бұрын
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!
@OnlyJasiel3 жыл бұрын
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; }
@webunlocked3 жыл бұрын
@@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
@OnlyJasiel3 жыл бұрын
@@webunlocked yeah, it can be made with native js, I had that example with JQuery already done that’s why I commented it.
@АлександрМелянюк-ц9ю3 жыл бұрын
You are the best! Thank you!
@VforVasile3 жыл бұрын
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)
@dazai90153 жыл бұрын
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 ?
@tce186710 ай бұрын
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'
@ivansmiths13883 жыл бұрын
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
@killerpopholly40542 жыл бұрын
Hey did U found out ??
@ivansmiths13882 жыл бұрын
@@killerpopholly4054 unfortunately not
@killerpopholly40542 жыл бұрын
@@ivansmiths1388 ok thanks dude
@jyst833 жыл бұрын
Oooh just hit the jackpot with this channel! 😍 'Liked' 'Subscribed' 'Bell button'
@webunlocked3 жыл бұрын
Welcome aboard!
@codewithhazem2 жыл бұрын
I am extremely grateful! Thank u very much! ❤❤
@webunlocked2 жыл бұрын
Thank you Hazem for watching yet another video!! You push me forward!
@Ajay-cb2tc4 ай бұрын
where is the first part?
@remicrce84818 ай бұрын
Edit : the gallery slider doesn't work for me... Sad but thank's for the huge rest part 🚀
@ilearncode73652 жыл бұрын
Why is that timer so convoluted? Wouldnt this work just as well? useEffect(()=>{ let interval = setInterval(() => { setPreloader(false) }, 3000); return ()=> clearInterval(interval) },[])
@IntoAllGames2 жыл бұрын
You tell me… did it work?
@webunlocked2 жыл бұрын
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.
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?
@webunlocked3 жыл бұрын
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)
@mihawkace76762 жыл бұрын
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-cz7wf11 ай бұрын
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..?
@omnandurkar34904 ай бұрын
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
@saide35602 жыл бұрын
why the horizontal scroll section doesn't work for me?
@webunlocked2 жыл бұрын
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
@saide35602 жыл бұрын
@@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
@thedyslexicwebdev16542 жыл бұрын
41:03 46:28 10:00
@russelp96663 жыл бұрын
hey man love u hehehehhe!
@isekaiguy9113 Жыл бұрын
Aaahm... uhhhmmmm, ahhmmm, ammmm... shut up!!
@webunlocked Жыл бұрын
?
@tce186710 ай бұрын
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?
@yrew20049 ай бұрын
same error : (
@pierre-etiennechognard57632 жыл бұрын
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-etiennechognard57632 жыл бұрын
For personal use of course. Just for training
@webunlocked2 жыл бұрын
I've updated the video description with a link to a gist file.