Apple Airpod Pro Javascript Animation Tutorial

My new HTML5 & CSS3 COURSE IS OUT NOW!
developedbyed....
I am excited to bring you a javascript tutorial today. I always enjoyed apples product presentation pages on their website.
One cool thing they did was they animated a sequence of pictures or video based on the users scroll.
So in this episode we are going to create a javascript animation that animates a video based on scroll just like the one on airpod pro.
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
All the code will be available on patreon.
FILES: / 31251043
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/dev...
#javascript #programming

[@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 😂

[@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.

[@NicoMidnightDigital]

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.

[@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

[@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!

[@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!

[@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?

[@MygenteTV]

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

[@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.

[@yani_again]

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

[@kinstar]

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

[@rajikkali]

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

[@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!

[@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!

[@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

[@ahmadalharbi9097]

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

[@42mix22]

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

[@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

[@dhruvalraval8078]

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

[@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 🤣

[@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!

[@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

[@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:

[@joseaugustogutierrez6705]

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

[@sakibabc]

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

[@scrapdev1219]

love this channel, your videos are more than tutorials.

[@ernestorodriguez4742]

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

[@aryanbhargav1755]

your explanation was really passionate loved the video sir

[@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.

[@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!

[@UnIdentified-dz2lq]

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

[@ahmadeditz3368]

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

[@sketchygfx]

Thank you my gorgeous teacher on the internet.

[@patrique.taletoria]

Dude is hilarious. I was cracking through the course!

[@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

[@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!

[@hasanparasteh5242]

the hug that you gave yourself felt soooo sadddddddddddd

[@zarghamaijaz5933]

I swear i love this dude's humor.

[@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!

[@talhamehar1884]

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

[@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

[@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

[@keuba1]

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

[@Frankslaboratory]

Yay, more JavaScript !!!

[@someshwarroychowdhury8623]

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

[@kevinwakhisi7001]

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

[@alyadiawara3970]

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

[@dontbeafraid5313]

You have made my life better than Apple

[@abdelkaderismail5751]

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

[@최희수-m3f]

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

[@victorekea]

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

[@jonaskarl]

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

[@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?

[@JLunaRose]

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

[@zeddmaster]

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

[@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

[@alirezamohammadi8578]

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

[@ApurvaKashyap-kj6qz]

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

[@pax4698]

Absolutely fantastic video. Thank you for sharing Dev Ed!

[@codewonders]

your fuuny videos are the best honestly i laugh so hard that i learn more LMAO

[@marwanalsaydali6886]

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

[@sarthakbajpai1064]

love your videos and they help me understand many things

[@rafaelzgomes]

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

[@piusvictor8780]

I always get two benefits from your tutorials,learning and health from laughing 😂😂,you are so amazing Ed keep it up.

[@podkriznikaljaz]

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

[@anmollbansall]

True

[@IsaacAttuah]

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

[@oober66]

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

[@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

[@IshanKesharwani]

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

[@pouriyanourouznejad7090]

Awesome video 😂 Do this kind of funny tutorials more 💜

[@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

[@thomasduthie]

That intro cracked me up. Great video thank you! (also yay 500th comment!)

[@helmybouchiha3696]

You are the best tutor ever !

[@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

[@pike9]

Your are my favorite video sponsor :D

[@Eltopshottah]

The real MVP keep them coming!

[@ivihysenbelli475]

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

[@dvs3993]

You are really a Pro! Thanks once again man.

[@bojandurmic1]

Man you are the most interesting tech KZbinr I've ever subscribed to. Keep up with those dumb jokes and high quality tutorials!

[@salraza1993]

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

[@pratikxavier8176]

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

[@Bharath4u13]

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

[@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.

[@mystichorizontravel]

You are amazing bro !!

[@reviewofall-AM]

nice tutorial. an immense amount of knowledge i got from this vid! thanks for sharing :D

[@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

[@thepunisher2330]

Great job Man

[@anubhavsur1441]

Bro you are awesome u have inspired me a lot

[@mridulmishra8166]

for the Algo. content is great as always.

[@vitorteixeira7948]

You're like a pewdipie Dev, I've started learning front end a month ago and your videos are my go to, you're funny, informative and just adorable, Dev Ed for president

[@soul.rebel1986]

This is soooo much better than apple's site! You're too awesome Dev Ed and too underrated 👍🏽

[@deathdefier45]

You're an absolute legend.

[@kimizhang2349]

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

[@jiahaoyu855]

You decipher a big UI scret!

[@66Nerix99]

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

[@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.

[@PokeNew]

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

[@altaha.ansari]

The color of your sweatshirt suits you ❤️