Mastering Scroll Animations with GSAP ScrollTrigger

bit.ly/3JZJcWI 👈 Design & code like me. Use "UI2023" for 23% Off!
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- 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!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@anandkurella260]

Thankyou JavaScript Jesus 🛐

[@Nusamaxa]

This was really helpful ✌

[@callu6528]

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

[@goinnovate26]

Thank you. So helpful.

[@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!

[@pj4626]

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

[@Dojo2000]

bruh everyone know english

[@oliwia_haja]

you're so helpful 🙏🏻

[@alokrajsingh5705]

Crystal clear ✨

[@prashantmishra5691]

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

[@generandociencia7578]

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

[@user-pt1og1xd4v]

Same To You

[@prasanthmoolethodi3152]

Thank you, Valuable

[@umeshmadushan]

great video.
😍

[@HuynhLuong227]

thank you so much

[@user-ot9eb3vc2u]

So cool

[@kevinnacario359]

Thank you so much! Amazing teacher 😁

[@dawid_dahl]

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

[@MR-DURO]

More GSAP videos!!

[@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

[@studiomonty]

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

[@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 !

[@angularsight6529]

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

[@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.

[@kingsgambit9284]

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..

GSAP is 🚀👏
"Get smooth or die trying" 😂

[@antoninodellalbani431]

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.

[@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.

[@6.squash.936]

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

[@mariaineslucas3196]

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

[@crazykidscomedy]

First to comment ❤
Love your work

[@thevikingsock8527]

Can I integrate that library into WP without major effort?

[@ayanmajumder6672]

What plugin are you using for the code suggestions?

[@DesignCourse]

Github Copilot

[@Way_Of_The_Light]

Can please make tutorials recreating Awwwards websites/animations?

[@DesignCourse]

Will be doing this, yes.

[@Way_Of_The_Light]

@@DesignCourse awesome 🤩🙏🙏

[@ayushgogna9732]

next video in reactjs maybe? i havent used vanilla html css in years

[@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

[@JoaoVitor-gm2yf]

Just use a separate invisible element as the trigger. So regardless of what you do with the animated element itself the animation is controlled separetly

[@irfansaeedkhan7242]

why did you stop making three js video 2 years ago

[@anuragkaushik3805]

can anyone give me full css code for this video?

[@poh3310]

Thenks Jesus

[@bc4749]

imho, I think it's about time for GSAP to have a user interface for development instead of pure coding for faster implementation. this kind of approach is getting dated especially when you have projects/pitches on the fly. A good example is how Dora is using a timeline similar to AE to animate positions and properties on a webpage.

[@animalfarm8560]

he looks awfully like AI generated

[@user-yg1wd6bk5j]

why anyone never teaches to use gsap with react or any other framework ??