Create a Modern Gallery Animation with GSAP & Lenis

Feedback on the pacing and updated aesthetics for this type of tutorial? 👇

More like this content AWESOM! It's straight forward, Clear & Concise, THANK YOU!!!

wheni put my scroll is being delayed
can anyone tell me why is this happening

Thanks Gary. Personally I love the delivery and length of this video 👌 In fact that length of video would make me more likely to click on it. As someone who is experienced with CSS and JavaScript it’s a nice format to quickly get inspiration for new ideas and stuff to learn. Probably not ideal for beginners but not every video style is going to suit everyone’s level. Awesome work as always!

is this applicable to card ? - noob here, will appreciate tips. thankyou

I have struggled for hours to use lenis in a Next.js project... How do I do it? When I scroll I get a 1 sec delay, and then it just pops into place. Can't find any information about Lenis and react. And ChatGPT has failed me. Any clue?

i tried a bunch of smooth scrolling libs like locomotive, gsap smooth scroll etc. and found that lenis is the best of all (no native scrollbar hijack). so now i'm using lenis in combination of gsap for the animations and the scroll triggers.

Is it possible to use this code in elementor?

ya, Greensock is the best. I love you can scroll trigger anything you want and create some interesting storytelling if you wish

Thanks for sharing 🫶

Can we have the source code please

Can we do this on Adobe XD or figma im a beginner

Just want to say thank you for all the tips you give and sharing so much of your time to help the web design community. I'm a coder, does not know anything about UI/UX things, starting to work on my personal website and I'm struggling on how to start designing it. Your videos gives me a lot of knowledge and ideas.

very straight to the point! keep it up.

Short videos are good for:
1. Reference videos ("What was that smooth scroll library again?")
2. Quick tips ("What was that GSAP option for making images move at different times?")
3. Basic direction/inspiration ("Ah, this is a cool library/feature that might let me do that thing I want to do", "Oh, this'll help me spice up my designs.")
4. Introductions to full code examples (for people who want to read more code).
5. Marketing.

They're good for people who, like me, just need a quick refresher, inspiration, or are a bit more advanced and want to 'get to the point'.

Longer is good for detailed instructions geared towards beginners.


I appreciate the shorter videos because they respect my time.

love these short style videos !

Excellent

There was nothing wrong with older videos, but this is soo nice :D I'm getting closer and closer to getting UI/UX course ))

This style of video is amazing. Please do more like this!

This video format is much more better, BUT imho it will be better if you show the code editor on the left + browser on the right, so people can see what results should they get! Anyways gj!

Hey Gary, that smooth scroll library looks interesting. Is there some type of tech news you follow to discover new libraries?

Thinking of accessibility, it’s best to use img elements with alt text for any non decorative images. You could use object-fit: cover; to imitate it being a background image. This way people who use screen readers can know what’s being displayed.

Is GreenSock is ❤

I love the new video format. Please keep it going.

Is it true that this "lenis" library solves a lot of the issues people have with other smoothscrolling libraries like locomotive or the gsap one? How about performance?

Again you did it <3

This video went totally bouncer.. don't try to shorten the length too much.. i know your thought process but.. rather keep it medium length.. atleast 7-9 mins..