1 Trick To Creating Awesome Websites! (JS ANIMATIONS!)

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

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

  • @SpaYco
    @SpaYco 4 года назад +333

    who's that guy on the right trying to mimic your movement

    • @beinyourguard
      @beinyourguard 4 года назад +28

      He's veD dE, his doppelganger

    • @MourideGoor
      @MourideGoor 4 года назад +3

      @@beinyourguard lol A+

    • @Miles-co5xm
      @Miles-co5xm 4 года назад +4

      he is also Ed but sheeran

    • @alwaysawakening4603
      @alwaysawakening4603 3 года назад

      He is always trying to catch up with Eds smooth moves!

  • @shikharsinha6407
    @shikharsinha6407 4 года назад +249

    "It's all darkness, just like our lives"
    That had me laughing then crying

  • @ewrroi3i34
    @ewrroi3i34 4 года назад +218

    when you realize "innovation" is misspelled but you don't care because the animation is too cool!

    • @sankaranarayanan7847
      @sankaranarayanan7847 4 года назад +2

      Ikr

    • @JCCraftB3
      @JCCraftB3 4 года назад +6

      mispelling = inovative

    • @travisreed4443
      @travisreed4443 4 года назад +6

      Holy crap, I literally didn't even notice this until now(and I've replayed the animation so many times)😂 Shows what a good animation can do

  • @andiandrei78
    @andiandrei78 3 года назад +6

    I really like how you teach, it looks so real.
    - “it should work, what did I messed up”. So true

  • @sathvikkp201
    @sathvikkp201 4 года назад +17

    Ed, you make courses and tutorials human.. Amazing work, appreciate it!

  • @guyarnav
    @guyarnav 2 года назад +2

    You are the best programming teacher I've ever used on this website. Your teaching style is amazing

  • @samii-i-i
    @samii-i-i 4 года назад +3

    I literally started with coding few months ago, and found this guy and I swear he is soo damn funny I fell in love in coding even more!! Keep up the good work mate!

  • @sanghvian
    @sanghvian 4 года назад +49

    Always refreshing to see any tutorial from you. "Best way to learn programming is by not learning programming"😂

  • @manishtripathi4097
    @manishtripathi4097 4 года назад +94

    You'll make a course on react is the best news we can hear in 2020😭

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

      I was disappointed that he did use js animation instead of css. just a stylistic sort of thing

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

      @@TheBelrick why?

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

      @@nonamed56 websites are now getting REALLY bloated with LOTS of scripts being loaded and run.
      When profiling a site, look at how much time is spent on scripts.
      where possible, don't. CSS allows for animations without js.

    • @Creedoo
      @Creedoo 3 года назад +1

      @@TheBelrick you do realize that the animations gsap library provides are way above what css can do ?

    • @TheBelrick
      @TheBelrick 3 года назад

      @@Creedoo its about speed of development and reduction in scripting bloat. The ONLY things that matters is end user experience followed by that the website performs its intended functions.

  • @patrickpaxton4858
    @patrickpaxton4858 4 года назад +3

    Ed, not sure if you know this, but I swear you save people from depression, with you humor, absolute legend, thank you for all the content, over the years!!

    • @Seven77tw
      @Seven77tw Год назад

      @TurkBros. Production I'm sorry but he's not, you are

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

    I probably could have built this and was gonna skip but your comentry & intro made me laugh so I stuck around. Ended up learning something and was very entertained. You have gained a sub good sir!

  • @davidoginga3983
    @davidoginga3983 3 года назад

    I have watched tutorials, but none has been so fun and informative. BEST TUT EVER.

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

    I like your channel because you don't bs like most "developer/youtuber" does where they just talk about themselves and their journey. You actually help people and I applaud you for that. Keep these videos coming dude you are doing great! Cheers!

  • @magolao
    @magolao 4 года назад +1

    I've been looking to make something just like this. THANK YOU

  • @barer_
    @barer_ 4 года назад +10

    19:36
    be careful ed, your health is the most important thing.
    Awesome tutorial btw, take care

  • @reesericdotci
    @reesericdotci 4 года назад +45

    dev ed: get the hell out of here! speaker: nooooooo dev ed: oops

  • @ElLevidente
    @ElLevidente 4 года назад +7

    Speaker: makes sound
    Ed: I'm about to end this mans whole career

  • @SteffOverflow
    @SteffOverflow 4 года назад +40

    Speaker makes noice..
    Normal Person: Turns off speaker
    Ed: Unplugs speaker and throws it away ! 😂

    • @alistaw1866
      @alistaw1866 3 года назад +1

      he's crazy and i love it 😂😂😂😂

  • @vladgutu6863
    @vladgutu6863 4 года назад +20

    "- Let's grab 'big text'.
    -I'll tell you what else is big.."
    You cheeky boy😄😏

  • @memerman9405
    @memerman9405 4 года назад +2

    Discovered your Channel few days ago..
    I must say.. ur videos r addictive. ✌🏻

  • @alwaysawakening4603
    @alwaysawakening4603 3 года назад +1

    I love your tutorials my friend. Simple and elegant. Well done as always!

  • @bocanegradev
    @bocanegradev 4 года назад +3

    Very nice! You should show how it looks in responsive variations :)

  • @warkentien2
    @warkentien2 4 года назад +5

    22:11 TIP: If you set `y: "100%"` you won't be able to animate `y: "0"` only `y: "0%"` (at least in GSAP 2.0). Solution: use the rule `yPercent ` instead of `y` if you plan on using percent values.

  • @walkingin6375
    @walkingin6375 4 года назад +4

    Hey man, your channel has helped me a lot, while I'm learning Web Development.
    Just wanted to leave a like, and this comment.
    Take care. :)

  • @matth8355
    @matth8355 3 года назад

    You are now officially on eof my favorite code teachers. Good job my friend.

  • @aryanjpg
    @aryanjpg 4 года назад +4

    Sir you are very cool, you are my motivation for web development,
    Very soon I'll also start my channel thanks to you.

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

    I think you said you already did the react course, I really love your courses, more direct and clear explanation, helped me with more than 4 project, thank you for everything you present in your channel.

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

      I hope this massage reach u.

  • @vaniad555
    @vaniad555 4 года назад +2

    Once more good to wake up to your videos, thank you from Canada!

  • @reignscoder5027
    @reignscoder5027 3 года назад +1

    Your personality is making me convinced that I should meet you once in my life

  • @ASKAI200
    @ASKAI200 2 года назад

    You're you too humble buddy, you make learning easy with your humor

  • @goesaroundcomingaround4059
    @goesaroundcomingaround4059 3 года назад

    I liked how you explaining lessons
    I'm studying javascript , I loved your work

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

    Always wanted such gr8 content.... finally found someone who teaches gr8

  • @Unba8743
    @Unba8743 2 года назад

    Absolutely love you tutorial,2 minute in the vid and i already want to scroll down to subscribed,much to my surprise,i already subbed,great video man

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

    You are so underrated bro. Love your videos! Just got the "creative js course"

  • @nate1988
    @nate1988 3 года назад

    This was such an awesome little project. I am absolutely using this going forward -- many thanks for another great video!

  • @AG-qp7gn
    @AG-qp7gn 3 года назад

    Man, I don't watch a lot of your videos, I don't know you that well. But something in your voice and in your behavior makes me like you.

  • @kacperkowalski6862
    @kacperkowalski6862 3 года назад

    Awesome job! I didnt know before how works animations , now its look like simple :)

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

    Love the new format. Only wish the camera angle was more front facing

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

    Excellent video.I'm digging how easy this is with GSAP.

  • @dariopetralia3914
    @dariopetralia3914 3 года назад

    Hey, I'm Italian and I can anyway understand you and I really like your humor so don't be angry. I understand with "learn by doing" couple of things. Sure I'm not a pro now but you must go on! (and thank you for your contents)

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

    holyshit. This guy could be a stand up comedian instead of programmer. I laughed so hard while watching this video. Thanks man for made my day a lot better today :)

  • @yuli1970
    @yuli1970 3 года назад

    Wow, in 30 mins you just showed me how to use gsap 3 and made me definitely want to try it.

  • @Brandon-sr4qp
    @Brandon-sr4qp 4 года назад

    Fantastic! Thanks for the introduction to gsap, sir.

  • @DavidHernandez-jk2qw
    @DavidHernandez-jk2qw 3 года назад +1

    This is so awesome!! , now I'm wondering how to make it responsive!

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

    watching you and learning is the best thing i can do in quaratine

  • @saidsaid-nn1qk
    @saidsaid-nn1qk 4 года назад +21

    02:30 "FInd a better video than this one " damn, it had me laughing as f***)

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

    one of the Best programming content on RUclips

  • @AhmedAlaa-um8co
    @AhmedAlaa-um8co 3 года назад

    1:14
    Speakers making a notification sound
    Ed: [Throws it aways like NBA basket-baller]

  • @developedbyed
    @developedbyed  4 года назад +474

    Like if you are a terrible swimmer 🏊‍♀️

    • @limuthunethsuka9698
      @limuthunethsuka9698 4 года назад +1

      yeah bro!! ❤

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

      When will you release rest of the react tutorial?

    • @none-xy2ox
      @none-xy2ox 4 года назад +1

      Please can you help me to solve a problem.
      I create a website with react.
      I finished the site, I want to hosting it to share it with my friend. I use github, but the problem whene I create new terminal and: npm start that good. I create "git init". This is the problem the terminal show a red paragraph. Tell me git init is not recognized as the name cdmlet....
      Please help me to solve this problem

    • @magolao
      @magolao 4 года назад +1

      @@none-xy2ox hosting a website is a whole other topic and requires more than a simple answer. Luckily, there are tutorials for that too :) but if you want it quick and easy, look into ngrok (yes, i spelled it right)

    • @none-xy2ox
      @none-xy2ox 4 года назад +1

      @@magolao but I matched a lot of tutorial but doesn't work

  • @fuco5951
    @fuco5951 3 года назад

    Dude this is amazing ! Thank you Dev Ed :)

  • @J90JAM
    @J90JAM 3 года назад

    Do more of these! But more of how JS is commonly used on websites - buttons, on scroll etc.
    This could've been done with CSS alone.

  • @sylvzarzycki7875
    @sylvzarzycki7875 4 года назад +1

    This is why I subscribe to this channel. Quality content AND a hilarious teacher. Thanks, Ed!

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

    YAAASS!! This is what I've been waiting for!

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

    I really like your way(style to making everything looks like web development is tooooooo easyyyyy for you)

  • @philliphaynes6136
    @philliphaynes6136 3 года назад

    if you take out the slider class it makes the animation better, rather than seeing a grey slider but its better if you add another image in the slider rather color

  • @nobellanyarari1443
    @nobellanyarari1443 3 года назад

    You're amazing and precise .. Thank you Ed .Nice tutorial . Grasped everything I needed to know!

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

    Thank you for making all these tutorials!! You are one of my favourite youtubers on this platform! Hope you are doing well :)

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

    Awesome awesome awesome!!! The animation is too cool!!! Tks buddy

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

    I freaking LOVE your videos!
    It's like ASMR or something

  • @albertcabanday801
    @albertcabanday801 3 года назад

    not only educating but also entertaining this guys is hilarious 😆

  • @amarjitsingh8954
    @amarjitsingh8954 3 года назад

    Thank you for this quick guide and introducing me to GSAP.

  • @yasirsheikh3680
    @yasirsheikh3680 3 года назад

    I swear you perfectly timed it. The moment I looked at you on the screen is when you said "Are you cheating" lol

  • @jaykamanga7982
    @jaykamanga7982 3 года назад

    ay man, im learning front end web development, and i gotta say you make it fun bro

  • @raudkelly2613
    @raudkelly2613 4 года назад +3

    "What are we doing? OH, we're building animations" I feel that

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

      ruclips.net/video/-ZKwMlbyr48/видео.html new html,css and javascript game project

  • @Dijinio
    @Dijinio 4 года назад +1

    I laughed so much during this great tutorial video :) Thank you!
    You should also consider doing stand up comedy...

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

    I love your tutorials. I love your personality. Thanks for teaching us.!

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

    Hey man love you efforts it's so fun to watch and easy to learn . Hope you are doing well and stay happy❤️

  • @daboren1547
    @daboren1547 3 года назад

    Love This !! really enjoy your video content !!

  • @kevinwaag9976
    @kevinwaag9976 3 года назад

    This is amazing I didn't know about this library! so much easier!

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

    You are real Comedian Developer Teacher Ever we meeting :D
    Really Awesome Intro as well.

  • @ashutoshpotdar7411
    @ashutoshpotdar7411 3 года назад

    Learning is one thing but your video really keeps me relax . Your vibes are super cool🔥🔥

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

    ty so much. The last 30 minutes of my work are rescued.

  • @dereksimmons7041
    @dereksimmons7041 4 года назад +1

    New sub. Great video as usual. The same effects can be done with CSS but it's easier to do it with GSAP in JS. Just my opinion.

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

    Again, great content. Thanks for filming. Hope you are well.

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

    Love you Ed!! Fab tutorial again!

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

    Subjective take on what gives a good first impression. It can be argued that too much motion or unnecessary animation can be tacky, leaving a poorer impression than just a static page.

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

    I've said this before, I'll say it again. This Chanel is gold

  • @johnandrevalencia7170
    @johnandrevalencia7170 3 года назад

    really liking the humor in this

  • @alinethani2236
    @alinethani2236 3 года назад

    thanks for all the great tutorials you honestly help me out a lot

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

    This is an awesome tutorial, thanks Dev Ed.

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

    Hello Ed, I always love your tutorial videos, and I have watched a lot of them and learned a lot from them. One little request from my side: can you put the library you are using in the title so in the future if I want to search it up and rewatch it I can find them? Cuz now I can only do that from memory of which video you have done on say for example, “Gsap” in this video. Thank you and may you have a blessed day

  • @herik111
    @herik111 3 года назад

    I love how this guy smile while coding, thank u teacher💕🐧

  • @Rahulyadav-lv7dh
    @Rahulyadav-lv7dh 4 года назад

    13:43 -LMAO ,dude that was just awesome

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

    I love the way you teach tutorial. And these tutorials helps me a lot in hard time. If you know you know😁

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

    Your video is so awesome. I have learnt a lot from your resources

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

    Awesome content, new ideas with a great workshop!

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

    Love Your videos and your humor xD Thanks for sharing your knowledge!!! Appreciate it!

  • @ghettotimoteo
    @ghettotimoteo 3 года назад

    you make it easy to learn this, thank you!

  • @zagno3237
    @zagno3237 3 года назад

    Best tutorial ever, first time that i don't close a tutorial video after 5 minutes😂

  • @diogosoares1309
    @diogosoares1309 3 года назад

    You are one of my favourite teachers Ed! I hope you are doing good brother.

  • @MrinmoyHaloi
    @MrinmoyHaloi 2 года назад

    if you wanna put it in the middle just use
    display: grid; place-items: center;
    Easier and shorter

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

    Thanx for another great video! Learning a lot from you. Hope to see more videos !

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

    This was simple and beautiful.

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

    My entertaining part of the day is watching your videos lol!

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

    26 minutes just for one animation!! great!!

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

    I like your strange sense of humor when you are teaching us this awesome tricks.

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

    man, cant wait for your react course

  • @dissolvesoftware
    @dissolvesoftware 4 года назад +1

    We need to form a Dev Ed community 🤩🤩

  • @ft.dronin7052
    @ft.dronin7052 Год назад

    Man I love your tutorial I learned everything from you

  • @lofiwithshamique
    @lofiwithshamique 3 года назад

    Pretty good walk-through!