Javascript Animations For Beginners

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ก.พ. 2025

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

  • @serioussam9400
    @serioussam9400 3 ปีที่แล้ว +41

    Designing ends and js starts at 33:55

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

      omg your a life safer this guy is boring...

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

      thanks bruh so freaking hard to see someone design a goddamn cookie during 30mn...

    • @amazingtech2471
      @amazingtech2471 2 ปีที่แล้ว +11

      @@dwajdawjawodjawo Don't watch his tutorials if you find him boring.

  • @nadimsheikh489
    @nadimsheikh489 2 ปีที่แล้ว +8

    Design Start: 2:07
    Images part: 3:42
    Figma part: 4:57
    Design End and JS Start: 33:55

  • @innaatanassoff525
    @innaatanassoff525 3 ปีที่แล้ว +14

    Bought the course the day it came out and already did the first chapters. Super fun and learning a lot about animations. Thanks for the great content! Happy holidays and waiting for the puppy pics!

  • @harshusparz
    @harshusparz 3 ปีที่แล้ว +96

    My gorgeous friend on the Internet please launch this course on Udemy as well 🥺

  • @CrazyCodingChannel
    @CrazyCodingChannel 3 ปีที่แล้ว +8

    Simple and clear, finally all the most important in one video

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

    bought the course and started learning! 2nd course from you this year 🎉 THANKS!

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

    Hi Ed, if you are using flexbox on the cookie container, just use gap the get the space between the svg and the text

  • @hassaneoutouaya
    @hassaneoutouaya 3 ปีที่แล้ว +6

    It's really a good tutorial i was always struggling with SVG animation, but now i have an idea about how to do it soo. And it seems a nice course of JS animations filled with GSAP animations hints.
    Thank you!

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

    Still learning Javascript and this looks very promising

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

    Ed you are the best! I was just looking for it that you uploaded it

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

    You're an amazing person you should know that, such great content at such a reasonable price!

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

    Thanks so much Sir 💙

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

    You are the best man! Thanks!

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

    What a cool library ❤️

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

    Finally I got a perfect mentor for js animations ✨ love from India 🇮🇳

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

    very amazing , thanks Ed 😍

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

    I learned a lot thanks for the great tutorial

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

    merci pour cette vidéo elle est magnifique

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

    thanks so much you are the best Mr Ed.

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

    im already in love

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

    Thank you so much...❤️

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

    This guy is my fav asmr voice

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

    Excellent tutorial; thank you

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

    Love this❤️

  • @NikhilKumar-ry7eg
    @NikhilKumar-ry7eg 3 ปีที่แล้ว +2

    Is it coming on Udemy?
    I like to keep my courses organised at one place, if possible.

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

    This video it's very helpful for me.Thank you

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

    Awesome tutorial!! Thank you for creating this! :-) Will def experiment with using GSAP :-)

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

    @Dev Ed why wouldn't you make a complete tutorial on gsap and scroll magic

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

      Hey Abijeet! Are you a fresher and open to opportunities in web development currently? Have you created any projects in JavaScript frameworks?

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

    Sold! I'm enrolled :)

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

    Really Cool !

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

    Hi Ed can you make a course on Express,node and APIs.

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

      i think he has some 20 min videos on his channel... id say its not very begginer friendly but its an amazing video if u know the basics ..helped me alot

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

      @@shreyasphadnis5550 is it? I have worked on express and APIs, but have some doubts and need good explanation

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

      @@raunac1498 Yup you should surely check it here is the link
      th-cam.com/video/vjf774RKrLc/w-d-xo.html
      th-cam.com/video/2jqok-WgelI/w-d-xo.html

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

      @@shreyasphadnis5550 thanks man👍

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

    thank you!

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

    The Best ❤

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

    31.30 you could add flex-shrink:0; so the cookie doesn't shrink due to padding.
    PS: good work.

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

      Well we can also use min-width to cookie

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

    Importing GSAP for a simple cookie notice and a few animations is hurting too much the performance.

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

    Which VS Code theme are you using?

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

    Thank u ed

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

    awesome
    Please give JavaScript more projects

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

    why do you DevEd use a Mac?

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

    GSAP seems amazing

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

    What VScode theme do you use? I love your videos man thanks a lot

    • @mister-med
      @mister-med 2 ปีที่แล้ว

      This is the Material theme (Ocean) by Equinusocio.

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

    Awesome!!

  • @SajidKhan-wx5hh
    @SajidKhan-wx5hh 3 ปีที่แล้ว

    Hello Ed is it enough to become a front end developer after enrolling all your courses

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

    Hey @Dev Ed, why you switch from windows to use macos?

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

    Can you please upload the course on Udemy?

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

    are the cookie files that you showed in this video free to download on your github, if so which repo to use?

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

    I am having trouble with using gsap! VS code is not abling me to write gsap.

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

    Awesome tutorial.....

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

    We need this course on Udemy

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

    how can we create the custom exit pop up. when someone exits the tab or browser

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

    I'm having problems using gsap, it tells me it's not defined. Is there anything else I need to download before using it as a script tag on html?

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

    Nice bro

  • @HarshPatel-dv3hm
    @HarshPatel-dv3hm 3 ปีที่แล้ว

    It showing Transaction Failed due to insufficient balance even though I have enough balance in my account while purchasing this course.
    Could you please resolve my issue?
    BTW, thank you for such a valuable content.

  • @yt-spikegaming7394
    @yt-spikegaming7394 3 ปีที่แล้ว

    why are you doing it with rems? isn't pixel better?

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

      No, rem is responsive

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

    Great video....
    Please can you make a video on svg imported in html....because if I create a large svg design it's always bigger than it's container which causes overflowing on the Web page which I don't want..

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

      You can always scale it down or increase the size of the container

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

      @@mahmudurrashid9035 okay thanks I'll try that

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

    more content
    showing/teaching critical stuff with node express bcrypt and stuff plz.
    preferably with database [mssql]..

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

    He is a Devtor Strange.

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

    this is not vanilla javascript right?

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

    Thx u so much

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

    It's been 6 months since I left Web Development. But the funny thing is I haven't unsubscribed to your youtube channel yet 😭😭😭

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

    Vscode theme?

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

    Hello Boss Ed

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

    I am from india. is there any regional discount available?

  • @1000ylovers
    @1000ylovers 3 ปีที่แล้ว

    I like your courses but they have too
    Many errors. I bought the last course and it had a ton of errors for me to just type along…

  • @ZahidHussain-hj2dk
    @ZahidHussain-hj2dk 3 ปีที่แล้ว

    Make some react projects using redux toolkit

  • @infinity-atom-ro
    @infinity-atom-ro 3 ปีที่แล้ว

    Nice

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

    Change your default browser to Chrome

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

    Cool 😎

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

    Please upload this course in udemy.

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

    Why does this need to be done in JS, when this can be much easier achieved using modern CSS animations? It’s supported by all popular browsers and doesn’t require any additional libraries..

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

      @Syed Mohammad Sannan you can do a lot these days with plain CSS. And sure, some things are not possible, but you can just tie that functionality to a class that you toggle with JS (on scroll/click etc). In the end of the day, most common things you’d wanna do on a regular basis can be done in pure CSS (with a potential JS trigger). No libraries, no dependencies, just stuff that’s supported out of the box by most browsers.

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

      @Syed Mohammad Sannan but my whole point is that there is not need to depend on a 3rd party library that now has to be loaded up as well. CSS animations are pretty easy and toggling a class in JS is really easy too (if you need that at all). The only reason I see for using JS animations is when you need really complex stuff, like morphing vectors from one shape into the other etc. Otherwise plain old CSS will be more then good enough for most applications.

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

      @Syed Mohammad Sannan I get that they have their uses, but in this specific use case (the cookie popup), it would’ve been easier to just do all of this in plan CSS (with a simple JS trigger). It’s perfectly maintainable too & you don’t have to worry about compatibility or breaking changes introduced by constant updates to 3rd party libraries. If you want something complex, then it makes sense to use a library. But for simple animations like the ones in this video, CSS is more than enough in my opinion.

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

      @Syed Mohammad Sannan I agree, both are suitable for this case, but I personally prefer to avoid adding unnecessary complexity to my dependencies as much as possible, especially for something as simple as this. Just more things to load (meaning slower load times & DOM initiation) and more potential future failure points in the code (so, in reality, poorer maintainability). Of course the 3rd party library code looks all simple & pretty. But it’s like buying a G wagon just to drive around in the city - total overkill and very poor use of otherwise incredible utility, but at least it looks cool.

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

      I’ll put it this way, unless your animations are an integral part of your app UI (which most of the time they are not), with thousands of lines of code, I think a 3rd party library is not exactly necessary.. just animate your occasional buttons, pop ups and minor UI components using (potentially even reusable) CSS animations and call it a day

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

    Adds girl was a so beautiful 😋🥰

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

    Op

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

    Mac🤐

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

    Figma or ligma

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

    First view first comment and first like

  • @suman-gaurav
    @suman-gaurav 2 ปีที่แล้ว

    you wasted 34 Minutes on svg, html and css and then jumps to a library frameworks. Seriously man. mention that in title.

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

    Reasons that this course is bad.
    ============================
    01. You get small amount of content. because he is talking very slowly and spend doing things that out of the scope. for example, writing css (he even not good at it. he tries multiple times different css rules to check whats work whats onot work).
    02. When you market your course as a Javascript animation course, it should be a raw javascript course not a 3rd party library course. who cares about library. they come and go.

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

      @Syed Mohammad Sannan Thats totally bs. If someone release a course with a name "CSS for beginners" then I expect to learn pure css from that course not freaking bootstrap or someother css framework.

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

      Not gonna lie, l prefer more web dev simplified guy he going straight to the point wit good explanation. Also its my feeling :)