Horizontal Scroll Gallery and Reveal Effect Part 1 (Created with Locomotive Scroll & React)

Check out the tutorial and become more creative!
The next inspiration and challenge come from dribbble this time dribbble.com/shots/11648922-o....
In this part 1, we learn how to include Locomotive scroll into our project by creating a stunning horizontal scroll gallery
Just fork to have the starter project
github.com/nicubarbaros/web-u...
Source Code: github.com/nicubarbaros/youtu...
Demo:
scroll-gallery-effect.netlify...
Social Links:
github.com/nicubarbaros
/ nicubarbaros
Project bootstrapped by www.gatsbyjs.org/
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 :)
Do you like the series? You can support the channel by buying me a coffee at www.buymeacoffee.com/nicubarb... ☕️.

[@webunlocked]

Just fork to have the starter project
github.com/nicubarbaros/web-unlocked-starter-project

[@jamalshepherd243]

I realize it's kinda randomly asking but do anybody know of a good website to stream new movies online?

[@eddiematthias6049]

@Jamal Shepherd try Flixzone. You can find it on google :)

[@kendallcreed8437]

@Eddie Matthias Definitely, been using FlixZone for since april myself :D

[@jamalshepherd243]

@Eddie Matthias thanks, I went there and it seems to work =) I appreciate it!!

[@eddiematthias6049]

@Jamal Shepherd You are welcome :)

[@l-Il.-._.-.lI-l]

Very cool content man, thanks and keep it up!

[@webunlocked]

Appreciate it!

[@kxmg7205]

I just subbed! Keep pumping out free and awesome content my dude! Hoping you don't end up like wrong akram

[@webunlocked]

Thank you! I am not sure what did Akram but he is an amazing and talented creator!

[@kxmg7205]

@@webunlocked He's basically charging for whatever content he puts out now by making you join his channel.

[@kimlee8796]

thank you for that tutorial !!

[@webunlocked]

Your welcome Kim!

[@rajbannasa7662]

thank you so much sir

[@magdasokolovic]

awesome, will use this video as a helper for the portfolio I make :) thanks!

[@webunlocked]

Please do, and don't forget to share it with me on twitter so I could appreciate it.

[@magdasokolovic]

hey, I totally would, but unfortunately it does not work for now. but I really really want to make it work :D Your twitter your provided here in youtube is unavailable, did you change the name of your twitter? Or where else could I text you?

[@webunlocked]

@@magdasokolovic Ohh, yes I did. Silly me. I have updated the description with the right link.

[@magdasokolovic]

@@webunlocked still the same problem when I try to open twitter from your youtube profile. It says the same "This account doesn’t exist" :(

[@abdullahalmahmood3462]

I am a big fan of your channel. It will be helpful for us if you include some graphical presentation. grid representation and application are so hard for beginners. I recommended After writing some code you could show what the outcome of this code is on the screen.

[@seanhuggins5382]

underrated tutorial and I'm only 1 min in

[@webunlocked]

thank you for your kind words!!

[@taunado]

Great content. Minor suggestion - there's no need for background music, if there's just voice we have the option to play our own music in the BG :)

[@webunlocked]

Noted!

[@putifinasexy]

Hi Nicu, thx for the tutorial. I have an issue with the css. I applied your logic - it works really well but when I change to another route in my app, the css from the scroll persists (specifically html.has-scroll-smooth). I need to refresh the page so that the css from the scroll goes away - then it is just fine. What should I do so that when I change routes the pages that doesnt have any locomotive scroll take its normal css? Thank you so much!

[@webunlocked]

make sure to import the style sheet only for those pages where u use smooth scroll.
For example id tou have 2 pages Home and About then import it for only in About component

[@putifinasexy]

@@webunlocked thank you! that's what I did tho...so I wonder if the problem sits somwhere else...

[@russellseangonzalve4566]

what makes the images repeat again?

[@webunlocked]

Part 2 - th-cam.com/video/SCkmUTaUGCk/w-d-xo.html

[@mdabullais2114]

Smashed the sub button

[@webunlocked]

Thank you man! That means alot!

[@keish_awnna]

which vs code extension do you use that changes => to an actual arrow?

[@webunlocked]

That is a special Font that does that. The font that I'm using is called Fira Code (there are many others).
Here how to set it up in VScode github.com/tonsky/FiraCode/wiki/VS-Code-Instructions

[@keish_awnna]

@@webunlocked thank you so much!

[@deepak8586]

can someone explain this?
const images = imageData.map((tuples, index) =>
tuples.map((url, elementIndex) => (

))
);

[@webunlocked]

imageData is an array of arrays, as far as I remember the second array has around 5 elements, so iterate through each set of arrays and display a GalleryItem.
And columnOffset is how many columns should the next elements to skip.

[@deepak8586]

@@webunlocked thanks!!

[@rajsinghshekhawat8020]

thank you so much sir