Mastering Scroll Animations with GSAP ScrollTrigger

Рет қаралды 114,836

Күн бұрын

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!

Пікірлер: 47

@anandkurella260 10 ай бұрын

Thankyou JavaScript Jesus 🛐

@Nusamaxa Жыл бұрын

This was really helpful ✌

@callu6528 26 күн бұрын

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

@hridoyarrong 2 ай бұрын

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!

@goinnovate26 6 ай бұрын

Thank you. So helpful.

@oliwia_haja 5 ай бұрын

you're so helpful 🙏🏻

@alokrajsingh5705 2 ай бұрын

Crystal clear ✨

@prashantmishra5691 3 ай бұрын

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

@umeshmadushan 19 күн бұрын

great video. 😍

@kevinnacario359 10 ай бұрын

Thank you so much! Amazing teacher 😁

@prasanthmoolethodi3152 4 ай бұрын

Thank you, Valuable

@pj4626 8 ай бұрын

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

@Dojo2000 5 ай бұрын

bruh everyone know english

@HuynhLuong227 Жыл бұрын

thank you so much

@dawid_dahl 9 ай бұрын

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

@generandociencia7578 Жыл бұрын

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

@user-pt1og1xd4v 10 ай бұрын

Same To You

@studiomonty 20 күн бұрын

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

@user-ot9eb3vc2u Жыл бұрын

So cool

@angularsight6529 6 ай бұрын

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

@MR-DURO 11 ай бұрын

More GSAP videos!!

@artyxqq 4 ай бұрын

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

@kingsgambit9284 5 ай бұрын

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 !

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

Жыл бұрын

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

@6.squash.936 Жыл бұрын

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

@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 7 ай бұрын

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.

@mariaineslucas3196 7 ай бұрын

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

@thevikingsock8527 10 ай бұрын

Can I integrate that library into WP without major effort?

@ayanmajumder6672 Жыл бұрын

What plugin are you using for the code suggestions?

@DesignCourse Жыл бұрын

Github Copilot

@crazykidscomedy Жыл бұрын

First to comment ❤ Love your work

@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 10 ай бұрын

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

@Way_Of_The_Light Жыл бұрын

Can please make tutorials recreating Awwwards websites/animations?

@DesignCourse Жыл бұрын

Will be doing this, yes.

@Way_Of_The_Light Жыл бұрын

@@DesignCourse awesome 🤩🙏🙏

@irfansaeedkhan7242 Жыл бұрын

why did you stop making three js video 2 years ago

@ayushgogna9732 Жыл бұрын

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

@anuragkaushik3805 3 ай бұрын

can anyone give me full css code for this video?

@poh3310 2 ай бұрын

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.