Mastering Scroll Animations with GSAP ScrollTrigger

-- Today, I'm going to show you a very old design portfolio I created in the late 90's. I decided to modernize it from scratch both in Figma, and in code.

0:00 - Intro
0:34 - HTML
1:25 - Necessary CDNs
2:20 - Lenis Scroll
2:57 - Defining a Timeline
4:12 - Defining a ScrollTrigger
5:50 - ScrollTrigger Demos
14:40 - Scrub False
15:59 - ToggleActions
22:16 - Final Thoughts

Let's get started!

#greensock #frontend #javascript

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

Subscribe for NEW VIDEOS!

^-Chat with me and others

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

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

[hridoyarrong]

New on your channel. It is one of the best ScrollTrigger videos for sure. Please make videos on how to animate SVGs using ScrollTrigger, best practices, tips, etc. Looking forward to it. Cheers!

[callu]

great video mate! those labels you set on toggleActions really helped

[prashantmishra]

Damn Gary you are literally looking like a greek professor to me. Props for the cool scrolltrigger intro.

[pj]

Thank you so much, english isn't my main language but you are so didatic that i learned very well

[generandociencia]

man, I´m just learning JS to manage GSAP, and this video fit perfectly.

[dawid_dahl]

Thank you kindly.

Any reason you used Lenis instead of Locomotive for the smooth scrolling here?

[artyxqq]

Nice tutorial thanks! What extensison do you use for gsap snippets? All extensions that I have in VScode for gsap doesn't know about scrollTrigger

[angularsight]

Thank you for the proper explanation of Gsap, was looking for something like this for a while lol

[kingsgambit]

This video came to my feed on right time as i did raw css for doing college web design project and was not good with js and searching frameworks after frameworks for onscroll complete animate, or chnage property, this was a life save clutch and was learning gsap trying it out..thank you..

[code.design]

I have been using gsap since the early days of flash. My agency has the second sold tier of their pro licence. Still I love gsap, I do think tutorials should evolve to modern frameworks such as react or next. We develop 20+ AA+ sites a year and haven’t use vanilla js / html . Regardless great tutorials !

[UmairAliUGINTL]

I have an animation using css keyframes. There are multiple animations in each section. I want to show the animation only when the user scrolls to that section.

[mariaineslucas]

Where’s the initial example from? Was hoping that would be Demo’d. Thanks!

[thevikingsock]

Can I integrate that library into WP without major effort?

GSAP is 🚀👏

"Get smooth or die trying" 😂

[.squash.]

No way I was just thinking yesterday about Learning GSAP and you are here with a Tutorial 😭

[Way_Of_The_Light]

Thanks for using vanilla JS tutorials instead a JS framework. This way majority of the people can understand and apply it to any framework they wish.

[studiomonty]

I love how this guy looks completely different in every video I watch.

[antoninodellalbani]

It’s a tutorial of GSAP, which clearly is focusing “beginners”. If you already building APPs with react or any other framework you should be able to understand GSAP documentation without the need of any tutorial.
This is for the one saying tutorial need to be done in react or similar.

[ayanmajumder]

What plugin are you using for the code suggestions?

[ndopinghelenabih]

What if I wanted the animation to start and end in the center, like scaling the elements in the center by 20times it original size but maintaining it position and increasing the duration of the animation