Apple Airpod Pro Javascript Animation Tutorial

[@developedbyed]

Do you like the animations on Apples website?

[@miracleio8555]

I liked the animation and I loved your Video; both of 'em

[@ParidTvShow1]

Thanks for all these educational videos. Very helpful.

[@carlovonreyher]

Dev Ed Yes definitely but the from Google (google store) I personally like more can you make a video how to make them ? Greetings from Germany 🇩🇪

[@aykhanrh]

I was going to ask you to do this. Thank you

[@SahraClayton]

please tell me what theme you use for VS Code

[@sanghvian]

Dude you're just wayy to amazing at teaching. You've got this energetic and funny vibe which really helps maintain interest !!

[@sanghvian]

*too

[@AmanGupta-pr6qy]

@@sanghvian bruh no one does care bout english tho

[@johnbonjov1491]

@@AmanGupta-pr6qy Yeah we can tell from your English 😂

[@silkentech6420]

This guy will take over all the KZbin channel related to programming.

[@vector5g143]

when you don't use js but you continue watching anyway

[@techslugz]

Gotta start somewhere lol

[@vector5g143]

damn that was a year ago now im learning js lol

[@FC-BS]

@@vector5g143 same, but I'm also learning html and c# too

[@SiddiqNx]

The way it's implemented in the Apple website is by using images. Hundreds of images for each frame. In my opinion it's very inefficient. A total of 65MB is transferred from the server! Whoa! What you did is actually the right way - using a single video. Apple should hire you lol.

[@Antnix732]

Siddiq Nx I mean apples site does look smooth but your right that’s very inefficient.

[@TJHooper123]

Isn't that what Apple is all about? Quality at the expense of cost?

[@mansaha9288]

Transferring 65MB single video to clients is very ineffective, unless they are living next to the server.

[@chrismanning5232]

They likely did it this way for compatibility purposes, but they should've done it his way with a fallback to the separate images. His way relies on HTML5 and modern browsers.

[@BichaelStevens]

Think different. Not better, just different.

[@anormalking]

For anyone having trouble with freezing playback with your own videos: make sure that you divide 1000/the framerate of the video AND have the video with a proper codec, here's a script that may help, you have to have FFmpeg installed, and open your terminal/powershell: ffmpeg -i yourInputVideo.mp4 -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p theOutputNameOfTheVideo.mp4

[@graficdesignrv906]

This helped me so much, works like a charm now, thank you sir!

[@yahmo]

Thank you so much

[@manav8289]

Also, if your file size is too big, the -crf flag controls the video quality (and hence size). If your video's too big, try using a higher number for a smaller file size :)

[@marlourentucan9023]

never thought this would work. Things i learned because of this comment: 1. how to install ffmpeg in windows, 2. how to run commands in terminal (cmd) 3. the problem in my website was fixed. Thank you anormalking. you're not a normal king, you're a great king. I bow down.

[@shawn1202]

took me hours of trying to figure out why mine was freezing and not apple's one. god bless you

[@bogdogun5675]

If you see this in 2022, TweenMax is no longer on. GSAP has a new version that includes all the features of TweenMax so you only have to include the gsap/3.10.4/gsap.min.js script

[@Endarlike]

thanks

[@puvididdle]

thank you

[@C-ly-de]

king

[@remkm1715]

@developedbyed pin this?

[@alishapatel355]

Hey there! I'm a designer who just got in to learning HTML, CSS & JS. Your projects have literally been the MOST HELPFUL of my coding journey so far. You have great UI, you explain things well, your projects are fun and cool + plus you're a great teacher. PLEASE make more of these projects! They're fantastic!

[@MygenteTV]

you are the only coder i like in youtube. i dont know you keep it simple between funny and educational

[@rajikkali2381]

I’ve watched thousands of programming videos... you’re by FAR my favorite teacher. Thanks bro!

[@kinstar]

this guy xD "i want to thank myself for sponsoring this video" youre like one of my favourite channels with tutorials dont change

[@ignacioleon5648]

My native language is Spanish and I speak English, but sometimes I find it tedious to listen to videos in English, but your accent and way of speaking is great, I have no problem understanding you

[@sylviinho]

It's funny how I used to be a hater, but still came to your channel every single time. Now I'm a fan, and no longer come here necessarily because I need to, but because I enjoy seeing how good you are. Thumbs up, man! You are awesome!

[@joseaugustogutierrez6705]

Thanks Dev Ed for sponsoring my man's work 😇👍

[@rimantasdanilevicius6754]

Omg! this is crazy stuff! I will definitely apply it to my portfolio! You are amazing! p.s Traversy Media was talking about and said goods word about you. You inspire people!

[@sketchygfx]

Thank you my gorgeous teacher on the internet.

[@ahmadalharbi9097]

Everytime I stuck in javascript and began to leave it away I enter to Ed's javascript video to love it :)

[@podkriznikaljaz]

27:27 my OCD thanks you! I was so bothered with that typo lol

[@anmollbansall]

True

[@bw2962]

Not just about good tutorials... You are one of the best KZbinrs, Ed. You have a talent to hold attention and be fun. Use it, you can make much money with making online courses. It's a pleasure to follow you!

[@dhruvalraval8078]

Man you explain so good. Can you make a series on scrollmagic. It's so good to learn from a tutor like you:)

[@Frankslaboratory]

Yay, more JavaScript !!!

[@navjeetbharti544]

Ima sleeeep now. I'll copy it tomorrow and will show-off to my non-programmer friends.

[@henriqueomena7686]

just for remember , you never talk to much like u say at 21:22 believe or not u aways talk enough to us with basic or intermeadite skills like me, tks for sharing your knowledge you are awesome!

[@adehsanya]

I love how free you were with the video although I have not started js but I have subscribed and I’ve saved all your work. Keep putting more thank you very much. I should start this hopefully by next month

[@42mix22]

Love your sense of humour, please keep making these videos, they relax me so much :)

[@sakibabc]

hit shift 1 and tab and boom !!!! generation of the Association . Lol. Please more dialog like this

[@zarghamaijaz5933]

I swear i love this dude's humor.

[@AK-ln2ko]

Your way of teaching is toooo awesomeeeee... Just loved it!!!

[@dan_le_brown]

"I want to thank myself for sponsoring this video" is the most hilarious and wholesome thing I've heard today 🤣

[@Codedgar]

Man I was wondering for looong time how they did this effect! Would be great to have a more extended tutorial on how to use this on a more complex website, like animations going on and off in different sections of the site C:

[@talhamehar1884]

You've got a good sense of humor bro, I love that... 😉😉

[@greenion1]

Thank you for this video. I found it very handy. I've just got to add layering to it, and get the background to loop, and put a series of sections on a different layer and have it moving fully while the background animates but doesn't move. and then add animated transitions too. Thanks you help start this journey.

[@Nachtder]

As someone learning web development, this video helped me understand some small concepts that my course seemed to overlook or not explain properly. Thanks Ed!

[@ayyyrajat]

you're High AF when you do these tutorials. You know I'm right 😎

[@websquito2619]

wait what

[@Limpuls]

You probably never been high if you think so

[@AKHILPOKLE]

Arey bhai app yaha ? XD

[@ayyyrajat]

@@AKHILPOKLE lol

[@randerins]

You know you're wrong. He doesn't look high at all.

[@dontbeafraid5313]

You have made my life better than Apple

[@abdelkaderismail5751]

Top Tutor I learned a lot from him wie sagt man, Vielen Dank Ed

[@hasanparasteh5242]

the hug that you gave yourself felt soooo sadddddddddddd

[@ahmadeditz3368]

I can watch this man talk about paint drying and it wont even be boring

[@SparkSpectrumStudios21]

I'm here after implementing the logic for my company website image sequence animation, we did all optimization like cloudflare and compressing size of images but still the load time is high, If we use video then we have more controls and also more imp website loads faster, thanks I implemented in React but still vide is good

[@Dragonphitr]

To anyone who might have had problems with their own instance of video being laggy: I found the solution in the comments here. When you render your video increase the key frame rate! In Adobe Premiere I decreased my key frame distance to 1. It didn't increase my file size and it works perfectly now. I hope this helps someone who is stuck! Didn't really see much info on this issue so I decided to comment. Thanks for the great tutorial Ed!

[@edoardobordin9982]

You saved me bro! Thank you very much!

[@graficdesignrv906]

Increased it but is still dropping frames any idea?

[@ernestorodriguez4742]

Thank you so much. I was looking for this... Good tutorial.

[@scrapdev1219]

love this channel, your videos are more than tutorials.

[@black_baron_net]

☠️BLACK BARON☠️ " A problem repeatedly occured " is the only thing I saw in Apple Safari and Javascript overkill on one web page

[@patrique.taletoria]

Dude is hilarious. I was cracking through the course!

[@최희수-m3f]

I was so curious how to make this page. Thanks for letting me know

[@sorinursachi5287]

am I the only one who did not understand a single sh*t in the whole video but watched it entirely ?? :D This guy is too good at teaching and entertaining :D

[@keuba1]

Wow. Just wow!!! Brilliant as always!!

[@aryanbhargav1755]

your explanation was really passionate loved the video sir

[@IshanKesharwani]

Now I automatically like Dev's videos without even watching them. That guy makes everything so good.

[@thepunisher2330]

Great job Man

[@JosueM81]

I really appreciate the Atmosphere you emit. I want to learn coding if you're teaching home slice, because you make it fun and real. Thank you for sharing you're expertise!

[@ivihysenbelli475]

That L'indécis music in the background is amazing :D

[@cristianquintero288]

Great video! I think this approach only works if you put the video in the first section. If someone needs to use this for a video (or an animation made of a bunch of pictures), using "progress" instead of the "update" event worked for me, in that sense you can use the progress inside the section and multiply it for the number of pictures you're using, regardless of the position of the scroll.

[@ambogomudimba3503]

Kindly help out with a boiler plate, my code aint running

[@OstonCodeCypher]

Is Dev Ed listening to your conversation? - Yes, I was discussing this topic with my bro in the morning and here comes a super fun tutorial from him.Thanks, Bro

[@KostasOreopoulos]

It is much easier to write (the same equation just solving for delay) delay = scroll * acc/ (1 + acc). If you graph this, as acc increases, acc/(1 + acc) -> 1. So small acc => larger delay

[@UnIdentified-dz2lq]

This video made my day lol your a comedian. I love your energy. Amazing video ⭐️

[@hichamali9987]

Ty for the awesome video keep it up u r my favorite youTuber

[@raddadslab5097]

You are an inspiration! So much going on here. Your personality is awesome

[@alirezamohammadi8578]

حاجی پشمام عالی بود عالی خدا تو رو برای جامعه برنامه نویسی حفظ کنه

[@jonaskarl]

Wow that’s super simple! When I first saw it, I thought Apple took web design to a whole new level. Thank you :)

[@oober66]

I clicked like as soon as you thanked yourself as a sponsor

[@Bharath4u13]

you made it look so simple. am sure there is alot of background work for this video.

[@alyadiawara3970]

I really appreciate Every video you made your explainations, to be briefe i loved every video I watched

[@kevinwakhisi7001]

You make any kind of development fun Nice work bro🙌🏿🤜🏿

[@marwanalsaydali6886]

Thank you very much for making this and all what you do of course

[@helmybouchiha3696]

You are the best tutor ever !

[@ApurvaKashyap-kj6qz]

please make this in next js using react + gsap and it’s phenomenal capabilities

[@pratikxavier8176]

"I wanna thank myself for sponsoring this video" 😂🙏👍👍👍

[@darkbluebossa]

Cool. Love those "real world" examples

[@IsaacAttuah]

I was just thinking of re-making this website and you made my job easier

[@someshwarroychowdhury8623]

your videos really are one of the coolest frontend knowledge out there! Love from India

[@zeddmaster]

Thanks! That was very cool! For a long time I was looking for a guide to create such an animation!

[@sarthakbajpai1064]

love your videos and they help me understand many things

[@hunterss3017]

YOU ARE THE BEST TEACHER I HAVE EVER SEEN. PLEASE CONTINIUE TALKING TOO MUCH ON SINGLE LINE OF CODE THAT MAKES ITS EASIER TO UNDERSTAND

[@rafaelzgomes]

Thanks a lot! You made my day with this tutorial!

[@deathdefier45]

You're an absolute legend.

[@Meko_J]

very cool! I also wanted to learn how they did it when the website was live for the first time, i looked through console and looked at Sources and also network, I noticed that they actually used JPG sequences. so it was a bunch of jpgs like a flipbook.

[@pike9]

Your are my favorite video sponsor :D

[@dvs3993]

You are really a Pro! Thanks once again man.

[@mystichorizontravel]

You are amazing bro !!

[@pouriyanourouznejad7090]

Awesome video 😂 Do this kind of funny tutorials more 💜

[@ProgrammingwithPeter]

ScrollMagic is just magic!

[@JLunaRose]

You're amazing Ed, thank you for sharing this with us. Greetings from Colombia

[@moizkhalid2714]

Dev Ed u r champion 🤓

[@pax4698]

Absolutely fantastic video. Thank you for sharing Dev Ed!

[@victorekea]

I really love this video, funny and informative. My favourite combination. SUBSCRIBED! 😅

[@Eltopshottah]

The real MVP keep them coming!

[@altahaansari4701]

The color of your sweatshirt suits you ❤️

[@user-ix4dp7qh3l]

I am definitely going to add this to my portfolio website, thanks a lot!

[@NikhilAdiga]

Man! Dimitri Markov is quite a looker!👀

[@taylortoast2]

Looking good. Post is right on time.

[@jiahaoyu855]

You decipher a big UI scret!

[@Sanyat100]

i like ur playful nature and work ethic

[@kimizhang2349]

You're doing such a good job, thanks!!!

[@CS-hv9tj]

I was waiting on you to do this video :-) ! I figured it would be very similar to the parrallax tutorial, thank you so much Dev!

[@salraza1993]

"I would like to thanks myself to sponsoring this video". hahahahah I really loved it.

[@mayurpattar9310]

Breath taking animation tutorial brother ❤️❤️❤️❤️❤️💯💯🔥🔥🔥

[@ronnie6628]

Amazing video

[@66Nerix99]

Nice job man, thanks for sharing this!!!!

[@anubhavsur1441]

Bro you are awesome u have inspired me a lot

[@design4life861]

i am at an online lesson while watching this, i forgot to turn off the mic so everybody heard my laughter in the part where you were choked by the battery lol