SVG animation tutorial #1, quick overview (html, css, js, GSAP)

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 71

  • @mltumz5095
    @mltumz5095 8 лет назад +32

    im having a heart attack with your mic explosion thing!. . But great tutorial :D

  • @Vitr0l
    @Vitr0l 8 лет назад

    This tut is great! Thank you for showing how easy the workflow can be when using sketch + GSAP.

  • @rohitgird
    @rohitgird 8 лет назад +1

    Such an amazing video. Highly recommended to everyone. Great job!

  • @ugarz
    @ugarz 8 лет назад

    Hi, I'm glad you made this video !
    You got a pretty crystal clear voice and explain well your workflow.
    Thanks a lot you convinced me to work with svg. I'd love to see a more complex animation with SVG and Greensock.
    Keep on doing it !

    • @spelahvala1270
      @spelahvala1270  8 лет назад

      +Ugo Arzur Great to hear that, SVG is really useful! Otherwise Sarah Drasner or Sara Soueidan have a lot of info on svg and svg animation as well, I learned a lot from their articles and speeches.

    • @ugarz
      @ugarz 8 лет назад

      Yeah, I'm currently learning from them too :) I've made a simple store animated behind a circle for mask following your video and I'm pretty proud of it for a first try ! But I think I have to go deeper on timelines, haha !
      By the way, I'm using another tool which my please you : svgo. It's a really cool tool written in Javascript and you have two way to use it :
      SVGO - command-line (with NPM) : github.com/svg/svgo
      SVGO - GUI : github.com/svg/svgo-gui

  • @GhulamMuhiaudin
    @GhulamMuhiaudin 4 года назад

    You are an artist by voice!

  • @lotwar
    @lotwar 8 лет назад

    Awesome tutorial, clear voice, hope you will make more of tutorials.

  • @SasaHasidRA
    @SasaHasidRA 8 лет назад

    Awesome work Spela! Keep shining brightly!
    RA

  • @knowledgeispowerrr
    @knowledgeispowerrr 8 лет назад

    great tutorial, actually, don't know why you worried so much, it is very informative and I've learned a lot from it, so thank you and keep up the good work!

  • @liloo999
    @liloo999 8 лет назад

    This is grate, Im Starting to learn SVG animation and this was very helpfull

  • @MaxWilliam
    @MaxWilliam 8 лет назад

    Thanks Špela. Great video!

  • @barzolaalfredo
    @barzolaalfredo 7 лет назад

    im going to start using GSAP!

  • @Zombymedia
    @Zombymedia 7 лет назад

    OMG great tutorial -> It's easy and good to understand

  • @juliablaustein5724
    @juliablaustein5724 8 лет назад

    Great tutorial Spela! I am looking forward to more videos! Regards from Brazil :*

    • @spelahvala1270
      @spelahvala1270  8 лет назад +1

      +Julia Blaustein Thank you, I'll try to find time to do more soon :)

  • @lordzero9055
    @lordzero9055 8 лет назад +1

    Great tutorial i love it thanks a lot

  • @edwinGiraldo
    @edwinGiraldo 5 лет назад +1

    You voice is great, minus the exploding mic lol - Great tutorial tho, thank you!

  • @wrabac89
    @wrabac89 8 лет назад +11

    awesome!
    Just please don't tuch the mic when you are recording :)

  • @gunarajesh1
    @gunarajesh1 8 лет назад

    great start to svg thank u :)

  • @sami282149
    @sami282149 8 лет назад

    very nice.. thanks and we want more :D :D

  • @premainteractive
    @premainteractive 8 лет назад

    Cool!!!
    GSAP is amazing!!!
    The number of things that you can do with this is great.
    Great tutorial!!!
    And... lol... everytime I hear my own voice in any homevideo or tutorial I make for my friends the only thing that comes to my head is: whose voice is that? :P
    Cheers from Spain ;)

    • @spelahvala1270
      @spelahvala1270  8 лет назад +1

      +Oscar Retortillo Thank you! Yea for me GSAP is better than any other animation library, it's really cool :)

  • @cicd
    @cicd 7 лет назад

    Very nice... thxs for sharing

  • @nightkage3477
    @nightkage3477 7 лет назад +1

    Amazing, thank you!

  • @Ivy77813
    @Ivy77813 6 лет назад

    clear and practical!~~~~thankyou

  • @RockuMan
    @RockuMan 8 лет назад

    Very useful. Thank you.

  • @jerithemes5865
    @jerithemes5865 8 лет назад

    Nice this video, I learn make my first animation js :)

  • @creicky
    @creicky 8 лет назад

    this tutorial is very cool!

  • @wunorfleet2880
    @wunorfleet2880 7 лет назад +1

    Thank you, very helpful! :)

  • @samduss4193
    @samduss4193 7 лет назад +1

    thanks for the video ;) very nice explanation .. ;)

  • @emmanueljimenez7274
    @emmanueljimenez7274 7 лет назад

    Thanks for you video :D Help me a lot!

  • @heyyy4987
    @heyyy4987 6 лет назад

    Nice, Do it some serie. I would like to see some nice story in parallax mode perhaps.

  • @EstebanBarrientos
    @EstebanBarrientos 8 лет назад

    Very helpful, thanks!

  • @mamounmokni6814
    @mamounmokni6814 8 лет назад

    awesome ! great tutorial thx

  • @obelich
    @obelich 8 лет назад

    nice tutorial

  • @mailethiesen
    @mailethiesen 8 лет назад

    amazing. Thank you!

  • @BOMA1able
    @BOMA1able 8 лет назад

    thx. nice tut! go on!!!

  • @briotron
    @briotron 8 лет назад

    thank you!!

  • @AhmedEssam-lv5vn
    @AhmedEssam-lv5vn 8 лет назад

    thank you Spela thats exactly what um looking for :D
    likes and subscribed .. goodluck

    • @spelahvala1270
      @spelahvala1270  8 лет назад

      +Ahmed Essam Thank you, glad to hear it :)

  • @Amrdys
    @Amrdys 8 лет назад +3

    I really need some kind of Super power to know WHO THE HECK DISLIKED THIS VIDEO!!

  • @AndriesBester
    @AndriesBester 8 лет назад

    Great! thanks! :)

    • @spelahvala1270
      @spelahvala1270  8 лет назад

      +Dries Bester Thank you :)

    • @AndriesBester
      @AndriesBester 8 лет назад

      If you make another video, I would love to see how you can make an SVG animation into a link. I'm struggling with it.

    • @spelahvala1270
      @spelahvala1270  8 лет назад

      +Dries Bester that's a pretty cool idea... but do you want to make only a part of an svg into a link or the whole svg that is animated... one way is that you wrap your animated svg into a div an than put a link on that div:
      svg here
      Otherwise I just made a new tutorial on responsive svg animation if you are interested :) enjoy.

    • @AndriesBester
      @AndriesBester 8 лет назад

      Ill definitely check your new video. Cool stuff!
      That " svg here " makes complete sense. great! thanks

  • @nedimkufi
    @nedimkufi 8 лет назад

    thank you so much
    great job
    but which program you used

    • @hambone111
      @hambone111 6 лет назад

      I think she says sketch in another comment.

  • @ottowhisper3315
    @ottowhisper3315 6 лет назад

    Hi from Ukraine! Tell me please? can I make SVG animation with response on two click differently?

  • @gowriprasanthvm
    @gowriprasanthvm 8 лет назад

    Hi.. tutorial is amazing. Which tool you are using to draw svg?

  • @karanrawal2575
    @karanrawal2575 8 лет назад

    nice.. :)

  • @giovannicriscwcc4249
    @giovannicriscwcc4249 8 лет назад +3

    share some paypal link !!! the value of this training is very high in my opinion and it would be pleasure offer at least a pizza for that, really. compliments

  • @serumser1
    @serumser1 9 лет назад

    Great video Spela! Good to see more people into svg animation tuts.
    English is not your native language as you said, but you did a perfect work explaining yourself. Congrats!
    Do you know clip-path? Crazy animations done with it.
    We love climbing and GSAP! :)
    SVG animation collection: codepen.io/collection/AGomeO/
    Keep up the good work

    • @spelahvala1270
      @spelahvala1270  9 лет назад

      +SERUMSER CODE Thanks for the feedback I'm glad you liked it! Yes I know clip-path, you can really make pretty awesome stuff with it.
      Have a nice day :)

  • @axe-z8316
    @axe-z8316 8 лет назад

    Hi, where are you from ? that accent is familiar, but ..

  • @sujeet2info
    @sujeet2info 8 лет назад

    monetize you videos!!!
    and thanks to give startups for SVG learning

  • @chelseawilliams1408
    @chelseawilliams1408 7 лет назад +1

    Super helpful, thanks!