Create a Modern Gallery Animation with GSAP & Lenis

-- Today, we're going to create a modern gallery, scroll-activated animation sequence with Lenis (a new smooth-scroll plugin) and GSAP (the greensock animation platform).

Codepen:

0:00 - Intro
0:28 - HTML
0:44 - CSS
1:23 - JavaScript
2:25 - Final Project

Let's get started!

#frontend #gsap #javascript

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

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

[MicahKillian]

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.

[dannycabrera]

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.

[theMadZakuPilot]

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

[stefanallchorne]

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

[PleizyParagas]

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

[MatichekYoutube]

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

[garbjorn]

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.

[alanmurray]

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!

[vosyasabesquien]

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.

[safsafaf]

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!

[alexandrb]

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

[froilanimnida]

very straight to the point! keep it up.

[dannycabrera]

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

[caninan]

Hello, I am very grateful to you for teaching such beautiful things. But I have a problem. Even though I'm using the same cdn and codes as yours. There is a lag problem in gsap animations. There is a lag while the effects occur. Why might I be experiencing this even though my computer's features are good? can you help me ?

[rjmx]

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

[ananthapadmanabhanananthu]

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

[haugensnorre]

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?

[Pouncedd]

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?

[yinoization]

Is it possible to use this code in elementor?