When Parallax Effect Met Horizontal Scroll (GSAP & ScrollTrigger)

Watch as I experiment with combining horizontal scroll and parallax effects to enhance website interactivity and visual appeal.
Source Code: codegrid.gumroad.com/l/codegr...
Inspiration ▸ Awwwards Element from Giulia Gartner
Website: www.giuligartner.com/
Timestamps:
00:00 Demo
00:34 HTML
01:46 CSS
05:02 JavaScript
Instagram: / codegridweb
Twitter: / codegridweb
Public Discord: / discord
Music from Artlist.
Thanks for watching!

[@missanddiie]

You just gave me a great idea for a client's "About Us" view. Thank you so much.

[@codegrid]

Glad it was helpful!

[@eniolahabeeb8624]

Thanks boss I will be anticipating on the react video

[@rayyan21d]

This is amazing!!

[@naylord5]

uffff this looks amazing! 🔥🔥
Thank you so much for sharing

[@codegrid]

Thanks sir!

[@zenabhi0072]

Bro this is some cool effect and goes state to my portfolio

[@codegrid]

🙌🏼

[@julianvelez6563]

Awesome work bro ❤❤❤

[@codegrid]

Thanks bro

[@Patrick-yc3tf]

Do you have a video already for vertical to horizontal to vertical?

[@codegrid]

Nope but horizontal to vertical (yes, this one) and it can be used to create vertical to horizontal to vertical scroll

[@Mamalizzam]

you're amazing

[@codegrid]

Thanks man. Hope you find the videos helpful!

[@ammarmughal91]

If you don't mind... what's the name of the vscode font?

[@codegrid]

Berkeley Mono

[@ate_lugas]

What theme are you using?

[@codegrid]

Sequoia

[@AndersonManosalva]

pfff this is awesome

[@codegrid]

Thanks

[@mhdhasham2754]

great work bro, can you creat parallax zoom in effect? it's like we scroll in Z index and explore further parts of web

[@codegrid]

I think this can be used and built upon ua-cam.com/video/aAGypqJd818/v-deo.htmlsi=8pdHqY-_EyuZMWUI

[@user-vp3ty9kx5y]

❤❤❤

[@codegrid]

🙌🏼

[@lullimongal]

Great

[@codegrid]

🙌🏼

[@jaylazar]

Can you show us how to make a fully functional website. For those that have the membership

[@codegrid]

Members get the complete website templates and ask questions if they have any. I wouldn’t want to mess with my consistency of posting videos at this pace since complete website tutorials would take like 10x time to create/edit. Thanks

[@jaylazar]

@@codegrid thank you

[@jaylazar]

@@codegrid You have a skill that I would like to learn. How does $500 sound for a full tutorial on building a website from scratch start to finish?

[@lnard0]

what theme is that bro

[@codegrid]

Sequoia

[@herosova]

i can do it without gsap and scroll trigger

[@codegrid]

Awesome!

[@mggamer7396]

responsive animation tutorial?

[@codegrid]

Yes, it is responsive

[@mayanksharma6927]

Some TailwindCSS would be cool.

[@codegrid]

I have mentioned previously why I don’t use Tailwind. I personally don’t think it is a good option to build such custom experience. It might be good to build standard layout which needs to be maintained across the website. Thanks

[@mayanksharma6927]

@@codegrid I've been using tailwind with gsap and it's an absolutely great experience. No need to have confusing CSS when you can show your markup and styles in the same place. You can use absolute values with tailwind too, just like CSS and anything that is not available in tailwind, you can just create a class for that.
I think it's a good option for custom stuff like this, you can give it a try in a few videos, and see if the audience likes it. 🙂

[@codegrid]

Okay! Well I don’t like it at all but thanks for the suggestion

[@zaidgaming1881]

make monopo london gradient interaction please

[@codegrid]

Will take a look

[@zaidgaming1881]

@@codegrid thankyou please make, I am waiting for that

[@nishant7083]

Ae yo wassup ? Btw sth cooking about skill share course ??

[@codegrid]

If you’re asking about the course, I haven’t got any chance yet to start working on it tbh.

[@nishant7083]

@@codegrid you making me sad bruh

[@eniolahabeeb8624]

Nice work bro can you do it in react pls

[@codegrid]

React videos on the way

[@javieralbertoarias3159]

[@codegrid]

❤️