Creating Elaborate Website Animation Sequences - GSAP 3 Tutorial

Codepen:

0:00 - Introduction
1:45 - Interactive CSS Course
2:16 - HTML Overview
5:02 - CSS Overview
6:29 - Integrating GSAP 3 CDN
7:17 - Defining Properties
9:40 - Defining the Animations
20:37 - Final Thoughts

Let's get started!

#animation #ui #frontend

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

Subscribe for NEW VIDEOS!

^-Chat with me and others

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

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

[DesignCourse]

What (if any) animation libraries (CSS or JavaScript) are you using these days?! Let me know below.

[FIoydMayweather]

Gsap videos are always very welcome man this is possibly the best thing i've come across in web dev lol

[frankdrolet]

Love these GSAP vids and you're explaining it very well!

[kevkevships]

this guy just keeps bringing out bangers. great channel

[Nonshillnot]

Clicked so fast seeing that Slayer shirt!!

[Arm]

I liked your videos. Now that I've seen you wearing that Slayer t-shirt, I love them! 😂

[MiserableDuck]

Gettin' your "" and ; mixed up Gary! Great tutorial as always.

[paulwright]

Fab video - The only improvement would be a "Manowar" T-shirt.

[sayeghjoe]

DesignCourse video. The Like button is getting smashed.

[MyBaBB]

I like the GSAP also, but I have difficulties with VSCODE. I can only do one animation at time. VScode doesn't display more than one, but it works fine on the Build preview. I am running Vite, React, Js.
Have any Ideas what I might be doing wrong?

[tanmaym]

You should make a tutorial on how to trigger animations on scroll. Eg: websites like apple

[paddygmedia]

Bloody Hell! Your hair looks fabulous :o (Not joking, we all know what twitter comments told you to do with your hair :D)

[kenthefley]

Please tell me where you bought that Slayer shirt? I cannot find that design anywhere.

[r-i-ch]

Is there a particular reason you use the dots as :before elements instead of being divs?

[venkatesh]

You are really looking nice, with this hair

[dailymeow]

It can be made easily with css, no gsap

[vigilantezack]

Do the animations artificially increase page load times as detected by audit tools? Layout shift? Time to first paint? Time to interactive? Etc

Looks cool, but perhaps causes every kind of pagespeed error!

[TimShackelford-pe]

Wouldn't it be a better idea to animate FROM when you initial have things hidden on the off chance that Javascript is disabled for the user? Your defaults would be to have things shown, and your GSAP would do the hiding. At least that way your content would be visible by default, instead of hidden.

[davidfitcher]

Fuckin awesome shirt dude! 🤘 another metalhead designer here

[parthosarkar]

Man, would you please make a proper course on GSAP? Rarely any good course out there to learn it completely, .