Learn To Build An SVG Animation With CSS

แชร์
ฝัง

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

  • @nomadvagabond1263
    @nomadvagabond1263 5 ปีที่แล้ว +780

    "favorite photo editing tooool, visual studio code"
    best weed quality ever😂😂

    • @GreatDynamism
      @GreatDynamism 5 ปีที่แล้ว +1

      😂😂

    • @HammaRyuk
      @HammaRyuk 5 ปีที่แล้ว +2

      😂😂😂😂😂😂

    • @indieNik
      @indieNik 5 ปีที่แล้ว

      😂😂😂

    • @kornikopic
      @kornikopic 4 ปีที่แล้ว +16

      To be fair, there is "visual" in vs code :D

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

      Thought I was the only one who noticed that haha

  • @arturogsme
    @arturogsme 4 ปีที่แล้ว +157

    I cant't believe I didn't know SVG elements could be animated. Thanks a lot.

    • @abulkalamasif1270
      @abulkalamasif1270 3 ปีที่แล้ว +18

      I didn't know that these animations are made using CSS

    • @eggs1170
      @eggs1170 3 ปีที่แล้ว +1

      Rt xd

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

      ❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.

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

      ❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.

  • @ayyyrajat
    @ayyyrajat 5 ปีที่แล้ว +2

    My friend you've already created this and have it open in the other monitor, but you're making it sound like you're doing it first time. Absolute Legend.

  • @ramazonalizoda731
    @ramazonalizoda731 5 ปีที่แล้ว +29

    you did it in 20min.
    dude you're a genius

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

      nah, just copying the code from the other screen all the time

  • @kabilr1820
    @kabilr1820 5 ปีที่แล้ว +55

    If TH-cam have facility to like 1000 times, I will like this video 1000 times.
    Thank you so much Ed sir

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

      Just click the like button twice ✌

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

      th-cam.com/channels/kgYqlsFvu7Tq-W2n8aQwtg.html..
      Wow.. Amazing css and js effects here 😍😍..
      Visit once..

  • @danielgiustiniperez4289
    @danielgiustiniperez4289 3 ปีที่แล้ว +1

    Bro I swear this man is the funniest teacher on the internet. THIS is how everything in life should be taught, making me smile as much as I learn every time I watch a video

  • @anathkantonda
    @anathkantonda 4 ปีที่แล้ว +21

    You are full of chaotic energy and I love it! 😂😂 thank you for the tut.

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

    The "export with id" part was a big revelation, I have so many ideas now. Thank you!

  • @soulshott8284
    @soulshott8284 5 ปีที่แล้ว +19

    Thank you for doing what you do! I love your voiceovers and your humor as well as going through the issues with us and giving your verbal thought process. Keep it up! Really looking foreword to your HTML/CSS course, I plan on that being my intro to paid course work to learn and I’m really excited for the release!

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

      ❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.

  • @theonex7108
    @theonex7108 4 ปีที่แล้ว +33

    Couldn't stop laughing when he started animating the hat. The look on his face everytime it didn't go as expected 😂😂😂

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

      ❤️👉 th-cam.com/video/lmIwYLFYZ9U/w-d-xo.html 👈❤️.

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

    I was struggling so much with SVG animation and could not find a video that showed how to do this well until now! I appreciate you sharing your knowledge and hope you are doing well. Bless your beautiful face

  • @motivation4life430
    @motivation4life430 4 ปีที่แล้ว +22

    I watch full ads so that he can get paid well to teach such cool things for free

  • @real-manoj-manoharan
    @real-manoj-manoharan 2 ปีที่แล้ว

    Thanks!

  • @jassieeeee
    @jassieeeee 5 ปีที่แล้ว +23

    This is really cool and interesting. Never heard of all of these things. Thank you very much!

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

    This is still the best in 2021!! I will try it on my own. You are the best , Dev!!

  • @MaharshiBhaduriMusic
    @MaharshiBhaduriMusic 3 ปีที่แล้ว +12

    10:03 “All I need to do is literally just grab what I want to grab” - Dev Ed

  • @wilsonwang8641
    @wilsonwang8641 3 ปีที่แล้ว +13

    Can't stop laughing since the guy moves with losing his hat.😂😂😂

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

    Wow, you are using Blender! You are KING! Maybe in future we will see some CGI on this channel.

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

    This guy is hypnotising me with the way he is moving the cursor across the artboard and highlighting the shits

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

    I've learnt a lot from this one like the rest of your tutorials I've watched, I thank you Sir.

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

    Awesome Dev. Your channel is very very supportive to stay up to date. Thanks a lot.

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

    I’ve been looking for this for such a long time

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

    That PewDiePie energy is phenomenal. Great work, keep it up!!!

  • @KP-jx1wy
    @KP-jx1wy 5 ปีที่แล้ว

    Wow this is incredible! The amount of awsome UI's that can be built using this method is limitless!

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

    Thank u sir, been struggling with svg animations! This soooo helps thank u

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

      th-cam.com/channels/kgYqlsFvu7Tq-W2n8aQwtg.html..
      Wow.. Amazing css and js effects here 😍😍..
      Visit once..

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

    Am I the only one getting 2012 PewDiePie vibes? Too fun. Awesome tutorial!! Thanks 😁

  • @shishir833
    @shishir833 5 ปีที่แล้ว +1

    thanks for such a tutorial... i already knew about the process, but it wasn't that much clear. But, now it's super clear to me.

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

    Thank you! Clear voice, relaxed guidance, smooth music.

  • @ststeve499
    @ststeve499 5 ปีที่แล้ว +3

    Am I the only one that will always laugh throughout his courses...? I just can't control it😂😂 Thank you boss

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

    thank you!!!! happy new year!!! 🎉🎉🎉

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

    Thank you a million times! transform-origin and transform-box saved my issue.

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

    Your channel is amazing. Congratulations!

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

    This was a nice introduction to svg animation. Thank you!

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

    Thank you so much sir, I was struggling a lot with this SVG thing today, Now it's all clear, thanks to you. Please Ed do a video also about How we can create our own illustrations.

  • @omaryassir5885
    @omaryassir5885 5 ปีที่แล้ว +1

    That's the tutorial I was waiting for 🔥

  • @shedsoncode
    @shedsoncode 3 ปีที่แล้ว +1

    Thanks for this tutorial, finish creating mine, and it's easy to follow

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

    You can hold ctrl and drag the pointer over the plant to select all of its layers instead of guessing the layers on the panel.

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

    you are a crazy fun developer - me likey. piking through the css and html course. looking forward to get on the javascript course. Well done you.

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

    You are the best Dev Ed, seriously

  • @MonirulIslam-sg7oh
    @MonirulIslam-sg7oh 3 ปีที่แล้ว

    Wow I was never known how to make a svg animation with css. Amaizing!

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

    I love this guy
    really thank you man

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

    My fav Developer!!!!

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

    I love you man! Just what I wanted today

  • @BrasilEmFatos
    @BrasilEmFatos 4 ปีที่แล้ว +18

    "Yes I've shaved, looking 12" hahahaa

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

    😂😂😂 when you did rotateZ the first time. I love your style man

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

    Awesome teacher

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

    You are an incredible detail Dev.. Thanks!

  • @kuthub1989
    @kuthub1989 5 ปีที่แล้ว +3

    Bg Mild Music is awesome to hear, some of other TH-camrs damaged my eardrum by their bg music.

  • @TheSpxy
    @TheSpxy 5 ปีที่แล้ว

    Amazing content as allways. Thanks Ed :)

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

    Great Job Dev, The Way You Explain Things Is Awesome!!! 🧬 🕉

  • @AlexMartinez-pp2sj
    @AlexMartinez-pp2sj 3 ปีที่แล้ว +1

    Im ADOBE XD fan, but in this case Figma was the winner. The archive that XD export, was wrong or different than the Figma export. So... for the beginners like me I recommend use Figma :))

  • @valerijstolmacevs8341
    @valerijstolmacevs8341 3 ปีที่แล้ว +1

    Dev Ed makes very high level content, I just watched JavaScript course, and that was great 😌

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

    thankyou so much Ed.... now i know how svg animation work😍😍😍

  • @ahmadalwadi9156
    @ahmadalwadi9156 5 ปีที่แล้ว +1

    Hey, I have couple of questions 😬
    0. What font are you using in vs code?
    1. When is the course going to be released?
    2. How much are you planning to charge for it?
    3. Are you able to make a similar course for js?
    Thanks for the awesome videos!

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

    Love it! This helped me a ton. Thanks Ed

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

    exactly what I needed. thank you!

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

    Holy sh#t!
    Have to use this as soon as I can. Great that you showed this grouping part in figma for the parts. Pure gold! Thanks a ton, you're the man

  • @Qusbaz-zg2nv
    @Qusbaz-zg2nv 4 ปีที่แล้ว

    @Dev Ed, if you type *p0 + m0* and press the TAB button you're gonna get :
    *padding:0; margin:0;*

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

    My beloved friend I do respect you a lot. Thank you Sir and God bless you.

  • @YayanFauzi
    @YayanFauzi 4 ปีที่แล้ว +6

    8:01 LOL, his photo editing tool in on another level

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

      Damn that ad lmao

  • @saumyaverma9581
    @saumyaverma9581 5 ปีที่แล้ว

    thank you so much .....i was searching for it for so long!!

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

    First time learning it. Heard about it but first time watched how it works.

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

    Thank a lot, I am always in love with animation but never know how to do it with css, very nice tutorial :)

  • @JuanRodriguez-ve1wp
    @JuanRodriguez-ve1wp 3 ปีที่แล้ว

    like always Ed, great video and thank you for sharing.

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

    Wow! Amazing! 🎉

  • @ChristopherOnuminya
    @ChristopherOnuminya ปีที่แล้ว

    you just got another subscriber and a million thanks for that tutorial

  • @lailabouziani7704
    @lailabouziani7704 5 ปีที่แล้ว

    Im in love with your videos

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

    awesome bradar

  • @birsingh5388
    @birsingh5388 5 ปีที่แล้ว +3

    200K coming soon my gorgeous man 👌😃😄😛😜

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

    great video , keep on posting man :) learned alot right now!

  • @MohamedKhaled-sf8zm
    @MohamedKhaled-sf8zm 4 ปีที่แล้ว

    Bro you are just a legend ♥

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

    This is awesome! Thank you!

  • @username42
    @username42 5 ปีที่แล้ว +7

    uWu finally youtube had recommended me something valuable to watch and sub immediately :)))

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

    I diiiiiiiid it! Thanks Dev Ed. The shadows. though....man!

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

    Very nice tutorial. Love it !

  • @ps8883
    @ps8883 5 ปีที่แล้ว +1

    I don't know how, but TH-cam got drunk again, 137 views and 338 likes.... You deserve this!!!

  • @akinolanifemi8459
    @akinolanifemi8459 2 ปีที่แล้ว +1

    Hi, your tutorials are amazing! You said we can draw our SVGs rather than downloading them. That's awesome. Could you please do one on how to make SVGs. I would really love to know how to make them. Thank you.

  • @rio0323
    @rio0323 5 ปีที่แล้ว +71

    1:11 ”baikuuu”
    Seriously I thought you spoke Japanese

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

      th-cam.com/channels/kgYqlsFvu7Tq-W2n8aQwtg.html..
      Wow.. Amazing css and js effects here 😍😍..
      Visit once..

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

      @Praveen Kumar 57 😂😂😂😂

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

      That's how you say bike in korean. Paste this into translator and you'll hear just that 바이크

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

    Great tutorial. Easy to follow along and create simple animations.

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

    Great Bro. this is my first video which project now i m going to try svg animation

  • @ionwizard606
    @ionwizard606 5 ปีที่แล้ว

    Superb Video.Excellent

  • @FirdavsiGameDev
    @FirdavsiGameDev 5 ปีที่แล้ว +1

    Nice demo. Thanks! You can use inkspace for svg locally.

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

    Awesome. Thanks dude!

  • @_daya.shankar_
    @_daya.shankar_ 3 ปีที่แล้ว

    Thanks bro. Just what i looking for

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

    i like the way that u make your videos

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

    Exactly what I was looking for. Thank you.

  • @FranciscoDara
    @FranciscoDara 5 ปีที่แล้ว

    You are amazing man, thanks for your videos (from Brasil).

  • @strugglingElds
    @strugglingElds 5 ปีที่แล้ว +1

    love it man! pls create more animation in svg plsssss!

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

    this is amazing content. 💯🌟

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

    I hate the aggressive wix ads but I really like the tutorial... Cheers

  • @abdulghaniofficial
    @abdulghaniofficial 5 ปีที่แล้ว

    Wow! Awesome. Thanks for sharing! ♥️😁

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

    Awesome!!!! Thank you so much!!!!!

  • @desireecaceres5674
    @desireecaceres5674 5 ปีที่แล้ว

    omg your tutorials are super helpful!! thank youuu

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

    Great video! It was so cool!😄
    Wow, I loved this Figma tools, looks so easy and gives us a lot of functions! 😱

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

    This man... As crazy as amazing!

  • @daddae6903
    @daddae6903 ปีที่แล้ว

    I LOVE THIS GUY

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

    Hi am turning to 17years, and I would like to let you know that your videos on TH-cam really make me feel nice all the time.
    Am still a beginner and I would recommended you if it will be possible for you to teach me JavaScript sir.
    That a lot , I really enjoy your teaching and your explanation.💪
    And please let me know if you can teach me?

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

    fun and amazing work buddy.tnx 😍🤟👏

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

    Thank's brother
    That's Cool 🤩

  • @laetitiaarnould8759
    @laetitiaarnould8759 5 ปีที่แล้ว

    Great tuto, I didn't know undraw, it's great to learn about it. Thank you very much