Animating SVG with the Awesome GSAP 3.0

bit.ly/3pHGPMk - Take my UI Bootcamp now!
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to step into the world of frontend development, and make the landing page a reality for my relaunching of DesignCourse.com. We'll use GSAP 3.0 (GreenSock Animation Platform) to animate the SVG assets we created in the previous video (linked below).
Part 1 (Designing the UI in XD):
• Designing a New Landin...
Codepen demo for this tutorial:
codepen.io/designcourse/pen/y...
0:00 - Introduction
0:48 - An awesome offer from Scrimba
1:22 - UI Design Overview
2:13 - HTML and GSAP Code
24:23 - Making it Responsive
29:26 - Final thoughts
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: 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 Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Hey all, be sure to leave a comment and like. It helps more than you'd think! (Damn algos!)

[@k-techdev8992]

as always "great work"

[@NewDorkee]

Yea great job

[@crazypandatutsgaming9331]

nice . i like that .

[@heavygustav]

Well you start at the beginning!

[@pranavkastury9610]

Loved it Gary, I subscribed both to the YT channel and the upcoming course as well. Looking forward to it! All the best and keep more of these rolling.

[@mohammadakbar32]

Just two days ago I started using GSAP, I did watched your previous vids on GSAP. Very helpful!

[@VonPonzen]

Hey Gary. Always a pleasure to see you at work. Keep your channel going!

[@subhamsamir9209]

Gary! you do things like God of Designing. Awesome Stuff

[@tonimaunde]

My favourite design channel. Thanks for the video, Gary.

[@saadusufzai8795]

Loved it

[@dgloria]

This is soooo cool! It's not just looking good, but have an excellent logic underneath: how easy it would be just to ease from the right, but I'd never think of showing the blip as a writing, amazing. If someone ever asks why to pay this much money for such an easy thing, I'd say, try and do something fantastic like this including the design!

[@ravenizer]

All these years I've been hand coding these animations and transitions with setTimeout and lo and behold, this has been a thing all along. I guess it's never too late to learn something new tho.

[@DesigedByNino]

Thank god for this guy, taking the time to explain new technologies like this, as they come out

[@rastaplanet24]

You are the best course creator on youtube, because you say what you should say, you write as you fast as your spekaing!!! Many thanks for your videos and your time making those. Have agreat day , john from greece

[@bloomstv.]

Wait, really? I was just looking for this yesterday! WOW, such a timing.

[@KrishnaJha25]

Great video. The best thing is that you also keep an eye on telling the small stuff like how can we duplicate lines and all.

[@NicholasMaietta]

I just bought a Dell XPS 13 2-in-1 which features a wacom interface for the touchscreen, supporting the fancy stylus options that exist. I bought this machine for many reasons but one of them was specifically so i can see how I fare in doing vector based graphics and SVG animations. I can't wait for the stylus to get here to I can start really playing with this stuff. Your video just came in time because I wanted to check out GSAP and SVG stuff. Thanks!

[@Kevin-fl4rn]

looking good, hope we can see the design and build process for the rest of the site as well!

[@yashasvisingh362]

Whoaaaaa!!!!! What did I just see...🤩 Gonna take your scrimba course soon.!!!

[@christianachleitner9439]

awsome tutorial, so much side infos that are good to know :)

[@chandangoswami4983]

Simply Amazing..!!🔥🔥

[@igor_cojocaru]

Thank you. I did the whole thing in React. Very cool stuff

[@yacobee]

high-quality tutorials, tkx

[@biboswanroy6699]

I was overwhelmed seeing GSAP documentation and didn't know where to start. This video is great

[@heavygustav]

Well you start at the beginning!

[@WinterSnowism]

that's gorgeous

[@mystereo9041]

Thanks man I learned a lot. Appreciate it.

[@yasser.dev7]

Crazy tutorial, thanks.

[@indianahoosier5794]

The nice thing about using Illustrator to create your SVG is that you can name the elements ahead of time... and group them. I would have grouped all those non-essential elements as one group and the card as another group. Would make finding things so much easier later. Especially a complex SVG. I'm a novice at this though... not using Illustrator... just SVG and GSAP...

[@kneeyaa]

Excellent video

[@vatsalaykhobragade]

Thanks Gary I am comfortable with UI design. Thanks a lot. You are my Guru.(Damn this algos)

[@rahilmokashi3277]

This is really cool

[@Edwardtonnn]

Great video!

[@adrienbenaceur4805]

Hey Just arrived on your channel ! very nice Video, I already have subscribed ! :)

[@RamGopalsubbu10]

lol....Trad Braversy :D

[@sintetik]

awesome !

[@CodingUnited]

Nice thumbnail👌

[@ashwithchandra2622]

Thanks Garry Simon love you❤️❤️.

[@itboostaustralia8498]

cool az 🧡💼

[@alimohammed887]

I've been procrastinating learning GSAP for a quite long time, but now it's the opposite. Thanks Gary!

[@samristercut5363]

It's fairly easy to learn. I use to build ads with GSAP. I've taught many designers how to use GSAP that knew little to no code. Once you figure out the timing and what all the to, from stuff means you can have some fun.

[@JamesWelbes]

Hey Gary! Great video, as usual. I had an idea for a video series. We could submit our own layouts, and you would recreate the layout so we could see your approach and compare it to our own.

[@varunrsekhar]

Awsome

[@charlieschuyler9377]

Just looking for one of these a couple minutes ago

[@midhatahir8104]

Nunito font is love

[@DevPalliSri]

Thanks for the tutorial. Small query: How to do the same kind of animations to other elements that are below the page fold when we scroll to them. Thanks.

[@gamepills1276]

Keep it 👍

[@sdevaleem2530]

nice sir

[@guillaumeloreau1279]

Since you have used Lottie, would it be faster/better to do the animation on XD + Lottie and just play the animation or is this manual option better ? Thanks you very much for the awesome video.

[@muruganp4533]

Nice

[@sovonic322]

สุดยอดครับ

[@quaisarfahim6856]

You are the Besssssst

[@lequinhat]

Cool

[@rajeevsinxh]

GSAP should be named GASP!! ...it's awesome 😎

[@mywebsite6524]

awesome video. but one question sir, which is best Between gsap and anime.js plz reply sir

[@jrhager84]

couldn't you just use the stagger property for the blips?

[@anlhere]

nice thumbnail :D

[@yash1152]

0:59 at scrimba, u are able to modify the code as u learn... hmm, kinda interesting

[@peedsstudio]

my card is going too high but have written the same plz send help..

[@StormWolf01]

I'm starting using javascript svg libraries. I'm trying to chose the best library, but i don't know which libraries are the best. I've started using svg.js but i'm not too impressed. Gsap looks nice, but why is it that i can't find much info about it online? A lot of information about gsap seem to be from 2015. Is the project still alive?

[@colindante5164]

How about pausing during the clip and injecting some Iron maiden bass riffs. ))

[@svnbit8408]

TRAD BRAVERSY!

[@hemantjadhav7833]

is it possible to select and animate pseudo element like ::before and ::after in Gsap?

[@ambareen2368]

Yes, he shows how in this video at around 13 minutes 50 seconds kzbin.info/www/bejne/j6KymYSNl9Soeac

[@ipelengmolete161]

How does this compare to using something like Snap.svg?

[@gradientO]

Pls do a SVG tutorial

[@khaher]

how does this compare to lottie?

[@mstrjeevs]

👀

[@babaljeetsingh9321]

Hey hi there, I want to ask how to create your own SVG ?

[@Glorytonnothing202]

why are you using 'em' for padding?

[@olegnamedia2355]

Seems like I'm early

[@sdevaleem2530]

sir make more projects on gsap please

[@_pr0xy]

Trad Braversy ❤️👍🏼😂

[@George-rr1cd]

Who thinks Gary got buff during quarantine?

[@imharishsambasivam]

Trad Braversy, hmm this guy must be a youtuber 🤣🤣

[@aravindhhere]

First comment 😁😁😁😁

[@klutch4198]

var.... you devil you! lol

[@MysticMac000]

Trad braversy haha

[@quietnix]

Trad braversky. LMFAO🤣😂

[@iamtheasad]

You are justing doing stuff but don't describe why, how? All of your tutorials are the same.

[@fullstack_journey]

👀