Animating SVG with the Awesome GSAP 3.0

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ธ.ค. 2024

ความคิดเห็น • 82

  • @DesignCourse
    @DesignCourse  4 ปีที่แล้ว +23

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

  • @rastaplanet24
    @rastaplanet24 3 ปีที่แล้ว

    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

  • @subhamsamir9209
    @subhamsamir9209 4 ปีที่แล้ว +10

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

  • @tonimaunde
    @tonimaunde 4 ปีที่แล้ว

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

  • @ravenizer
    @ravenizer 4 ปีที่แล้ว +2

    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.

  • @TheHermitHacker
    @TheHermitHacker 4 ปีที่แล้ว +1

    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!

  • @mohammadakbar32
    @mohammadakbar32 4 ปีที่แล้ว +1

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

  • @VonPonzen
    @VonPonzen 4 ปีที่แล้ว

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

  • @DesigedByNino
    @DesigedByNino 4 ปีที่แล้ว

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

  • @RamGopalsubbu10
    @RamGopalsubbu10 4 ปีที่แล้ว +43

    lol....Trad Braversy :D

  • @biboswanroy6699
    @biboswanroy6699 4 ปีที่แล้ว

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

    • @heavygustav
      @heavygustav 4 ปีที่แล้ว

      Well you start at the beginning!

  • @pranavkastury9610
    @pranavkastury9610 4 ปีที่แล้ว

    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.

  • @KrishnaJha25
    @KrishnaJha25 4 ปีที่แล้ว

    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.

  • @dgloria
    @dgloria 4 ปีที่แล้ว

    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!

  • @indianahoosier5794
    @indianahoosier5794 3 ปีที่แล้ว +2

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

  • @yashasvisingh362
    @yashasvisingh362 4 ปีที่แล้ว

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

  • @bloomstv.
    @bloomstv. 4 ปีที่แล้ว +3

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

  • @saadusufzai8795
    @saadusufzai8795 4 ปีที่แล้ว +1

    Loved it

  • @midhatahir8104
    @midhatahir8104 4 ปีที่แล้ว

    Nunito font is love

  • @ashwithchandra2622
    @ashwithchandra2622 2 ปีที่แล้ว

    Thanks Garry Simon love you❤️❤️.

  • @igor_cojocaru
    @igor_cojocaru 4 ปีที่แล้ว

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

  • @yacobee
    @yacobee 4 ปีที่แล้ว

    high-quality tutorials, tkx

  • @Kevin-fl4rn
    @Kevin-fl4rn 4 ปีที่แล้ว

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

  • @christianachleitner9439
    @christianachleitner9439 4 ปีที่แล้ว

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

  • @chandangoswami4983
    @chandangoswami4983 4 ปีที่แล้ว +1

    Simply Amazing..!!🔥🔥

  • @vatsalaykhobragade
    @vatsalaykhobragade 4 ปีที่แล้ว

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

  • @WinterSnowism
    @WinterSnowism 4 ปีที่แล้ว +1

    that's gorgeous

  • @mystereo9041
    @mystereo9041 3 ปีที่แล้ว

    Thanks man I learned a lot. Appreciate it.

  • @rajeevsinxh
    @rajeevsinxh 4 ปีที่แล้ว +1

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

  • @Edwardtonnn
    @Edwardtonnn 4 ปีที่แล้ว

    Great video!

  • @yash1152
    @yash1152 3 ปีที่แล้ว

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

  • @rahilmokashi3277
    @rahilmokashi3277 4 ปีที่แล้ว +1

    This is really cool

  • @yasser.dev7
    @yasser.dev7 4 ปีที่แล้ว

    Crazy tutorial, thanks.

  • @alimohammed887
    @alimohammed887 4 ปีที่แล้ว

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

    • @samristercut5363
      @samristercut5363 4 ปีที่แล้ว

      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.

  • @kneeyaa
    @kneeyaa 4 ปีที่แล้ว

    Excellent video

  • @charlieschuyler9377
    @charlieschuyler9377 4 ปีที่แล้ว +5

    Just looking for one of these a couple minutes ago

  • @adrienbenaceur4805
    @adrienbenaceur4805 2 ปีที่แล้ว

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

  • @CodingUnited
    @CodingUnited 4 ปีที่แล้ว +2

    Nice thumbnail👌

  • @mywebsite6524
    @mywebsite6524 2 ปีที่แล้ว

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

  • @DevPalliSri
    @DevPalliSri 4 ปีที่แล้ว

    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.

  • @itboostaustralia8498
    @itboostaustralia8498 4 ปีที่แล้ว

    cool az 🧡💼

  • @sintetik
    @sintetik 4 ปีที่แล้ว

    awesome !

  • @jrhager84
    @jrhager84 4 ปีที่แล้ว +1

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

  • @anlhere
    @anlhere 4 ปีที่แล้ว +1

    nice thumbnail :D

  • @peedsstudio
    @peedsstudio 3 ปีที่แล้ว

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

  • @colindante5164
    @colindante5164 5 หลายเดือนก่อน

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

  • @gradientO
    @gradientO 4 ปีที่แล้ว +1

    Pls do a SVG tutorial

  • @FRguillaume.L
    @FRguillaume.L 4 ปีที่แล้ว

    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.

  • @JamesWelbes
    @JamesWelbes 4 ปีที่แล้ว +1

    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.

  • @gamepills1276
    @gamepills1276 4 ปีที่แล้ว

    Keep it 👍

  • @StormWolf01
    @StormWolf01 4 ปีที่แล้ว

    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?

  • @quaisarfahim6856
    @quaisarfahim6856 4 ปีที่แล้ว

    You are the Besssssst

  • @varunrsekhar
    @varunrsekhar 4 ปีที่แล้ว

    Awsome

  • @hemantjadhav7833
    @hemantjadhav7833 3 ปีที่แล้ว

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

    • @ambareen2368
      @ambareen2368 3 ปีที่แล้ว

      Yes, he shows how in this video at around 13 minutes 50 seconds
      th-cam.com/video/YqOhQWbouCE/w-d-xo.html

  • @ipelengmolete161
    @ipelengmolete161 4 ปีที่แล้ว

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

  • @sdevaleem2530
    @sdevaleem2530 4 ปีที่แล้ว

    nice sir

  • @sdevaleem2530
    @sdevaleem2530 4 ปีที่แล้ว

    sir make more projects on gsap please

  • @khaher
    @khaher 4 ปีที่แล้ว

    how does this compare to lottie?

  • @Glorytonnothing202
    @Glorytonnothing202 4 ปีที่แล้ว

    why are you using 'em' for padding?

  • @babaljeetsingh9321
    @babaljeetsingh9321 4 ปีที่แล้ว

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

  • @svnbit8408
    @svnbit8408 4 ปีที่แล้ว

    TRAD BRAVERSY!

  • @muruganp4533
    @muruganp4533 4 ปีที่แล้ว

    Nice

  • @_pr0xy
    @_pr0xy 4 ปีที่แล้ว +1

    Trad Braversy ❤️👍🏼😂

  • @George-rr1cd
    @George-rr1cd 4 ปีที่แล้ว

    Who thinks Gary got buff during quarantine?

  • @sovonic322
    @sovonic322 4 ปีที่แล้ว

    สุดยอดครับ

  • @lequinhat
    @lequinhat 4 ปีที่แล้ว

    Cool

  • @mstrjeevs
    @mstrjeevs 4 ปีที่แล้ว +2

    👀

  • @olegnamedia2355
    @olegnamedia2355 4 ปีที่แล้ว +2

    Seems like I'm early

  • @imharishsambasivam
    @imharishsambasivam 4 ปีที่แล้ว

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

  • @aravindhhere
    @aravindhhere 4 ปีที่แล้ว +1

    First comment 😁😁😁😁

  • @quietnix
    @quietnix 3 ปีที่แล้ว

    Trad braversky. LMFAO🤣😂

  • @klutch4198
    @klutch4198 4 ปีที่แล้ว

    var.... you devil you! lol

  • @MysticMac000
    @MysticMac000 3 ปีที่แล้ว

    Trad braversy haha

  • @iamtheasad
    @iamtheasad 3 ปีที่แล้ว

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

  • @fullstack_journey
    @fullstack_journey 4 ปีที่แล้ว

    👀