Make Scrolling Irresistible With This Image Reveal Animation

Learn how to create an addictive image reveal animation using HTML, CSS, and JavaScript with ScrollTrigger in this tutorial!
Source Code: codegrid.gumro...
Inspiration ▸ Dribbble Element from Evgeny Uprock
Website: dribbble.com/s...
Instagram: / codegridweb
Twitter: / codegridweb
Public Discord: / discord
Music from Epidemic Sound.
Thanks for watching!

[@sumedhbambal9373]

I enjoy your content so I liked the video 👍

[@codegrid]

Thanks!

[@taunado]

Love it, thanks.

[@codegrid]

🙌🏼

[@Way_Of_The_Light]

Very good inspiration 🙌

[@codegrid]

🙌🏼🙌🏼

[@Fashion_with_Ashish.]

Bro u are really good at GSAP. Bro can u suggest any KZbin channel with explain in deep GSAP like u pls 😅

[@codegrid]

I doubt you would find any. But what you can do is to go through GSAP docs. I think that’s all you’d need to get the fundamentals right. Rest is just how you use them

[@Fashion_with_Ashish.]

​@@codegrid but bro i can't think how animation is perform but u think and perform very well how?...

[@Dheeraj-h2l]

Hey @Codegrid I need your help. I also try to make this effect, but I don't know why my code is not working. All thing is set properly but only that reveal effect is not working. How can I show my code to you.

[@andrejkling3886]

Cool 🔥💯

[@codegrid]

Thanks!

[@kimayapanash8998]

Excellent Channel Absolutely brilliant

[@JamesJames-nv6ps]

Wow 😲

[@codegrid]

🙌🏼

[@sessionswithtemitope]

Thanks for sharing

[@RitikRajput-uq9sq]

You are great bro . Happy to connect with you

[@codegrid]

Thanks!

[@isaacjon]

You could do no-repeat center / cover

[@codegrid]

💡👍🏼

[@GameSynergy]

please make some animation website in react also!!!

[@dinbandhusharma4568]

amazing super 🔥❤‍🔥

[@codegrid]

Thanks

[@felppbro]

what's this vscode theme? awesome work!!

[@codegrid]

Sequoia

[@aniketpal2937]

which code editor are u using

[@codegrid]

VS Code

[@aniketpal2937]

@@codegrid Your theme is great which theme are you using

[@PPS018]

can we use locomotive?

[@codegrid]

In my opinion, Locomotive is garbage. Lenis is far more straightforward to integrate. It doesn’t need any data attributes, works like a charm with ScrollTrigger and doesn’t create any interruptions around page ends even after using transform properties. Which is why I stick to Lenis and don’t use Locomotive anymore!

[@gamingwithbot7032]

bro from where did you learn gsap?

[@codegrid]

GSAP Documentation, GSAP Forum, Codepens, etc.

[@treyrader]

@@codegrid haha was gonna say. The same way anyone learns...the same way @gaming is currently learning. Trying to refactor atm using react lenis and react gsap inside of a next app. and having tailwind as styles. gonna use unsplash's api so that all images that meet the query term gets animated. I'll let ys know if i succeed lol

[@mehdigolshan2587]

Hello and thank you! Please leave the same training without Lenis. Thanks.

[@mehdigolshan2587]

It does not work!

[@Samyak4236]

Bro try to do in react with tailwind it’s much easier you already doing so much css ! If youll start uploading on react plus tailwind your channel will hit more ❤

[@hameeeed5992]

Not everyone uses react and tailwind

[@codegrid]

Sounds like a nice idea but I personally don’t use any of those much as Tailwind seems like a good option to build traditional layouts. I don’t see it would be a good option for this use case.

[@dimitrileduc]

Proposing this in JavaScript and CSS allows everyone to adapt it to their own tech stack (React, Nuxt, etc.). See this as an inspiration and build your idea with your own stacks. Thanks for the work @Codegrid

[@bensal9948]

Bro you don't explain good, you type heavy unnecessary code sometimes which me as a intermediate coder don't understand and also you don't explain the important Javascript in deep way which is the important part. Please do something I want to learn from you

[@samraavana]

Please upgrade your level if you don't understand. Don't blame the content creator.

[@codegrid]

@bensal9948, if I were to explain every single line of code, the video would end up being an hour long, and I simply don't have the time to produce such detailed content due to my schedule of creating 2 videos/week. That's why I focus on explaining the overall logic instead of every line. It's not that I doubt your skills, but if you're finding certain parts challenging, it might be helpful to brush up on your JavaScript skills, which is completely normal. I often do a quick Google search when I'm stuck, and you can do the same. Additionally, feel free to reach out on our Discord server for further help. When I learn from others, I don't expect a line-by-line explanation either; understanding the bigger picture is often more beneficial. There are already plenty of KZbin series that teach fundamental coding, such as how to use a random() function.

[@fer.barrios]

Learn (and practice!) the basics of both JS and GSAP (including ScrollTrigger) and you'll understand everything.

[@petenicholson3255]

You do great videos. This initial comment is irrelevant

[@bensal9948]

@@codegrid okay brother thanks for your explanation, let me learn js more