Apple Airpod Pro Javascript Animation Tutorial

excitement you know why we are excited own good morning my gorgeous friends on the Internet in this episode we are excited because Apple released the new air pod the the the headphone things that you put in your ears and what they did they release this new website and basically they had this animation that took over the world and everybody was like how did they do that basically what they did check it out is when you scroll basically this video plays out based on yours closed scroll so what I'm gonna do is I'm gonna copy it get inspired by it you know what everybody gets inspired by everything anyway right we do pop G then you have for tonight and then all the kids are playing the game and they're paying all they take they get all the cosmetics and you grow up and then you're a parent and then you cry because your kids spend all the money wait for it now where am I going with this what is that so anyway this is what I did I filmed myself and when we scroll down we have this nice animation based on the scroll and the cool thing is if you scroll a bit faster we also have this easing so as you can see even though I stopped scrolling we still get a bit of movement which makes it look very natural and before we get going I want to thank myself for sponsoring this video thank you thank you hello you guys ready for this okay let's go so what we need to do is just create a new folder I'm gonna name this new era peddler oh okay this is gonna be the name open it up and I will provide you with a video in the description you're gonna find it but you can use any video you want what I have is the one you saw in the preview so I'm just gonna add that which is called Apple divide Pro okay that's all we need so now we can make our index dot HTML file okay hit shift 1 and tap and boom generation of the Association okay Apple dev ed pro we're gonna get the title to this one and here we're not gonna need to anything's just a few which is gonna create a class of intro and here is where I'm gonna add a title called the new dev ed pro okay and underneath is basically gonna be the video tag so I'm going to name this video and I'm just gonna give a source of this one okay Apple did that from okay let's all we need and at the end if you want to continue doing other stuff I'm just gonna add a section here and causes the revolutionary like that okay this if you want to add more animations and you want to continue you can keep going here with different sections okay cool I mean I guess you could have done this as a section as well but hey never mind okay so basically the animation that we're gonna do you can achieve it with vanilla JavaScript and I'm gonna kind of show you how it's just like one little modification I'm gonna add scroll magic and juicy SAP just so we can animate these titles and all just to make it look similar to what Apple has okay a little kick so what we're gonna do is go to our best friend Google here and so we're gonna click clickety clack of it here and we are getting we want two things from here actually one scroll magic which is the library that enables you to do animations on scroll so let's add it here like that you can just copy you can go to scroll magic and copy be script tag now if you want this to work with gzip you can also get animation G SAP okay so let's copy that - copy script tag we're gonna put it below and finally if we want some debugging help now you're gonna see that we can also add these indicators this is optional you don't need to add this I'm just gonna add it just to make everything more visible and easy to understand okay okay alright so these and then we're just gonna add G SAP G's app see the end all right good thing though weird websites showed up they're not safe for work so here what we're gonna do is just get tween max okay and there's also normal tween but we we want to get the max we want to maxed out for potential so if we're gonna add that at the bottom started from the bottom by week again I'll stop okay that's what we need okay now what we can do is just open this up and see what we got opening laughs Silva and wow it's horrible Wow okay cool and so what we can do is do a CSS jiggly and now with this we have the power to make it look even worse so let's just link it like that and in here I'm just gonna remove your basic Styles so you can do margin:0 on all the elements padding:0 and bucks on things above the box okay this is gonna remove all the basic styles and now we can skip the body and we can add a pawn family of sans-serif okay the only sheriff in town this is just gonna make a look a bit less worse okay and as you can see now we have no spacing on the h1 and everything because we removed all the margins and padding's on all the elements Wow okay cool am i recording the right screen let me check yes I am okay too much Halloween pumpkins I had what we're gonna do is grab that intro where addy title and the video is and I'm just gonna give it the height of 100 BH which is basically gonna be the size of my screen okay and so like that okay now this is gonna spill over a bit but don't worry because we are gonna fix it because we are good at that sometimes not really okay so here is how we fix we get the intro video and we just add a height of 100 percent and they width of 100 percent 20 percent luck twenty percent skill five percent concentrated power and well so we still have this problem as you can see so what we need to do is you can use object fit and what that's gonna do you physically object fit container cover it's gonna stretch out that image in that video it's gonna stretch it out until it basically fits the whole screen here so like that now you might be wondering add but I can still scroll why you do this why you do this to me well I'm already going to do is we're actually going to remove the title from here so if you add position:absolute you're actually removing it from the Dom okay so from the HTML structure you're removing it so it's not part of it anymore so it the video basically takes up all the screen okay so check it out if we say intro h1 and we have a position:absolute it gets plucked out boom see now we good now we get we still have this title but this is like another section so this is fullscreen okay so we pluck it out and then we put it in the middle you can do that top 50 and left 50 you know the old-school stuff that we all learned in kindergarten I hit my microphone again we can see transform translate - 50 - 50 save now this moves it perfectly in the center Wow okay and now what we can do is just increase the font size of this font size you can do around I don't know 80 pixels is that too big that's what she said okay um I'm happy I'm happy doesn't look too bad where's my text okay so we need black I mean white we need white honest then we go now I can see perfectly so this is all we need here that's all the CSS we can get this section here give it to height if we want of 100 VH any color of black to the text okay just in case we want this just a nice thing now let's also get the text we can say section h1 and we can just add a padding top of like 300 pixels and we can text align this to the center just so we have something to look at font size let's do 80 pixels as well okay just so we have this down here cool okay so we have the video okay now we can do the JavaScript part how do we animate this so let's do an app jes okay make sure you link it don't forget to go all the way down here right above your body and we can say script source fjs or whatever you named your javascript file yes perfect okay so what we're going to need to do is just grab a few elements first of all we can say Const intro section this is the intro section we can say document dot query selector intro okay that's how we named it okay we can get the video we can see counts video is equal to you now you can do intro dot query selector so you can you can look straight into the intro so whatever you have in there you don't have to do document and if you want like something that's already in in there so I can just basically select a video here see I don't need to like add an ID or anything we can get any text from that I'm gonna these are gonna be a bit vaguely named just because we have we don't have that many things but if you filled out the bigger project obviously do a video 1 video 2 I'm joking don't do that just give more specific names ok intro the query selector and basically we just have a h1 in here okay and at the end so this is the beginning here and this is the end action here what we're gonna have is we have that section so document that query selector and we have the section and finally we have the end text there so and I know I'm sorry query selector Oh see we can do section that query select right here like that and we can just get the h1 Wow cool okay so we have these few things now what we can do is we can initiate our scroll magic scroll magic like that and the way this works is basically create a controller and then you attach these to it that doesn't make any sense you're gonna see right now so let's create a controller we can say controller set that equal to new scroll magic make sure it's uppercase their gods controller I always mess it up so I have the code right here okay so we have this controller and now we can create AC all right and you can imagine like every like basically all the things you want to animate can be within a scene but then you might have another section of animations that can be another scene okay so let's just do one scene for now and then we're gonna do another scene and so it's kind of gonna be obvious what I'm trying to say but basically this scene is gonna be all about animating that video okay then we might have another scene that handles all the text fading in and out okay so this is gonna be you scroll scroll magic dot scene alright and here we can do parentheses and then curly braces because we can add some options in here we can add a duration so basically how many pixels I wanna scroll so we can add regression let's add a Towson and I'm gonna show you what this means and then we have also a trigger element so when do I want something trigger so let's do trigger I'm just gonna write it out and then I'm gonna show you here we're gonna add the intro and I'll also add a trigger hook and that's gonna be zero okay I'm gonna clarify everything hold on hold on to me maybe add a friend and then at the end make sure you don't close it here you basically attach all the scenes to the controller okay so all you have to do is add two controller like this okay very cool and what we can also do here is we can add in those indicators so everything becomes clear so add indicators like this with uppercase I safe let's just make sure this works and I'm gonna show you everything okay so I have the black background here unfortunately but up here I'm not sure if you can see we have the trigger okay and this is the end so basically basically the duration is gonna be this end here all right basically where you want the animation to trigger right so I can do it here at the end if I want now when does the animation actually happen well when this blue trigger here that's on the top hits the end so boom there okay boom so I can move these wherever I want so if I want iteration to be shorter I can just move this up so I can say after 500 pixels okay so as you can see now the end is here so now if I move this down boom that's where it hits I can also move this trigger hook which is this up here Ryan I can also move this around so zero is gonna be all the way top zero point five in the middle and here at the bottom is gonna be one so if I change this to zero point five it's gonna be in the middle generally I would just move the trigger one here so the trigger hook hook where you want the affected trigger and the duration kind of depends on on a few things if you want to do something combined with like G's app so basically the duration that you scroll it some things can animate and then this is something like that you kinda have to play with and the way I did it is my video lasts for nine seconds so what I did the duration here is I put it to nine thousand okay like that so basically there is a ton to scroll here a ton of ton a ton okay so basically throughout the whole video it's gonna be animated okay now I'm gonna move this back to zero because I want this to start instantly like that so boom okay we're gonna scroll now the problem is that this stays there okay it doesn't stay there it kind of moves down I want this to be pinned so what you can do is this is very cool you can just go down here and then you can just say set pin and then you can just add the intro like that hit save now if we scroll as you can see it stays stuck there until we scroll all the way down as you can see as soon as it's trigger one hits the end boom it stops it unpin zit so yeah if you want something shorter you can do a thousand as you can see now if I scroll thousand pixels boom it's gonna stop so this is kind of how the trigger works with the duration right trigger hook is basically gonna be the position you want to finish something so unpin something or maybe start an animation or start just add the class to something and the duration can be combined with gzip if you want to kind of scroll and animate or maybe you want something to trigger when you scroll down way more okay you hope that's clear and I talked about it too much people don't care so what I'm gonna do is I'm gonna make it 9,000 this I found that this works great for this but it's all experimentation so I didn't just say hey it's a 9000 and everything was good okay so now what I want to do is we're gonna get straight to the animation so here is where we set up our scene I'm just gonna name this seeing's and down here is working with work where we are gonna create the video animation okay so let me scroll down and here we're gonna need a few variables we're gonna need something called Excel amount and I'm gonna set it to 0.1 now what is Excel amount well what is gonna happen is when we scroll we're basically gonna change the frame of the current frame of the video so if I scroll down to like 20 I'm gonna fast-forward to 20 whatever 20 seconds in the video even though this video shorter let's say forward with five seconds okay so basically we're just changing the video to 5 seconds now what what's actually gonna happen is we're gonna have that easing so when we stop it's still gonna move a bit and this is basically the Excel amount it's kind of like an easing when we scroll all of a sudden forwards the remaining frames are gonna catch up and it's gonna give that effect that it's gonna move a bit more so you're going to see that you can mess around with this excel amount to get different results if we're gonna put this to one basically if we scroll fast or scroll so slow it's gonna be like this the tip okay it's gonna stop as soon as you stop scrolling it's gonna stop but if you put it lower if you stop it's still gonna go for a bit okay because we're gonna have this bit of doing and so I'm just gonna put it to zero point one and I'm gonna give you an example to kind of show you how this works so then we're gonna do a scroll position alright basically where we scrolled it's gonna be set to zero and we're gonna have that the link or that easing if you want to say that's gonna be zero to four now this is gonna be super short and simple surprisingly it's five or six more lines of code so what we're gonna do is on that scene that we created seen we actually have access to something so the scene here right the scroll magic scene we have access to something so we can say on it's basically an event listener on update all right and here we have an e which is an event alright this is basically just an arrow function here and this is what I'm saying if you want to do this in vanilla JavaScript you would just do a basic Evangelist in there on scroll okay that's basically the whole change and here what we can do set that scroll position equal to and on this event we have access to something called scroll position alright if we can so log this out I'm gonna show you scroll position position like that okay and you know what we can also uppercase this if you want you can uppercase these I go lazy let me uppercase these there we go everything is nice now so actually let's leave it lowercase because I don't want you to confuse these two things this is coming from scroll magic on the event alright so let me just cancel log event here so if we take a look in the browser if we scroll as you can see this event and that we have from scroll magic has a scroll position on top of it as you can see there and basically what this does is we have the duration which is nine thousand pixels and basically as soon as we scroll this keeps updating all the way till we arrive at nine thousand so there boom as you can see it's nine thousand now okay but the problem is that this is not gonna work for us because I don't want this to be nine thousand right I want this to be in in seconds okay I don't want milliseconds so what I'm gonna do is I'm gonna divide this by a thousand okay just so I get seconds because I have duration nine thousand milliseconds and here is nine thousand as well as soon as we scroll all the way down but I want you have seconds I'm gonna divide everything by a thousand all right so we have nine and the video is nine seconds as well okay this is all me I'm talking too much for like two lines of code oh my goodness okay and finally the last thing I need to do is just set an interval okay we can set an interval here like this and we can run a function in here like this and I can just add here's what we're gonna do we're gonna get that delay like this I'm gonna say plus equals and here we're gonna sink scroll position - delay times let me get out of there Times Excel a mount alright so basically what is gonna happen is we add two little delay whatever we scroll to and then we're gonna basically accelerate this by 0.1 okay and you're gonna see this happen in just a bit let's just try it console.log let's console.log the scroll position and d the link okay let's show you what happens and here I want this to run every 33 points three milliseconds and what I did here was what did I do here I divided something basic okay I forgot what I did why is this 33 seconds because let me think what did I calculate here we have 9,000 all right and we have nine seconds basically this is gonna be so the framerate doesn't look too bad if if I take a thousand and divide this by the frame rate of the video which is gonna be thirty yeah we have 33 all right it's like an ad I thought that this result would look good when we scroll if you have like a 24 frames per second video you can do you can basically divide the second byte 24 and then you would put it at 41.6 this is what I seen look good but feel free to experiment with this okay so I just want to console.log you scroll position and delay just to kinda show you what I mean by the delay catching up so take a look this is what we have when we scroll as you can see it's 9 and the the delay is catching up to our scroll position so we if we scroll 10 and this is catching up let's go up 0 as you can see boom the delay starts going towards our number boom ok so now take a look all we have to do in here is just say video dot current time and set this equal to our delay now let me show you what happens when we set it to the our scroll position okay you don't have to do any of these crazy things in here ok nothing you don't have to do anything so take a look when we scroll back if we start scrolling the video starts animating ok very cool but as you can see as soon as I stop scrolling boom it stops instantly so if this is something you want to have you can remove everything here okay you don't need this excel amount you don't need this delay you don't need anything but if you want to have that small easing then you can set the video current time to the delay all right hit save now take a look when we scroll a bit and stop see it so it goes for a bit weight which I think it just looks good alright so basically let me just go through this very quickly again so we have this excel amount we have the scroll position so when we scroll and we have this delay so what we do is we set the videos control to the delay and the only job of this delay is to scan is to catch up to where we scrolled okay so if we scroll to 10 the delay is gonna be like Oh 8 9 10 ok which is gonna give us this nice effect so all we did was set the scroll position to the e scroll position which is connected to this duration right because if we go all the way down it's 9,000 and we divided by a thousand just so we can get it in seconds and then in here we just accelerate people a based on the scroll position minus whatever there is in delay times the X element okay and now if if you want to have like a if you don't want this to be as powerful you can just change up the Excel amount to maybe 0.5 but this is gonna give you the most delay and then we just change the videos current time and said that equals to the to the delayed cell boom take a look at scroll Scroll scroll okay and then this kind of stops okay so what I kind of want to show you is quickly how we can animate this as well and and that's gonna be it so let me go back here well what you can do is just quickly add a new seal so all you have to do say actually you know what I had a bug with this for some reason when I added another seen and I have it Const so let's just quickly change the columns to let that seemed to work fine I'm not sure what kind of conflict that's going on there but this works fine when I said let and not constant so I'm gonna say new scroll magic Don seen like this and then here I'm gonna say the duration let's do the duration for D text so I can maybe save 3,000 I want on this and the trigger element is still gonna be alone see I messed this one up element element intro and the trailer hook is gonna be zero again okay perfect and then to make this animate all I have to do let's go here I'm gonna say text animation is create a animation I guess they let constant let's do Const text annum and stuff is equal to a tween max from 2 so I want to animate the text the variable that we have up here the h1 I want to animate that I can put 3 just like the duration and then I can go from opacity 1 and then you create another object opacity 0 to make it go away okay now we can add this to the scroll as you can see now it just fades away after three seconds but we don't want that so what we can do is we can go to our second scene that we just did where are you here and let me remove the the semicolon there and what we can do is to say that's tween text animation okay this one up here and finally you just add the to the controller all right so all these things that you create you basically add to the controller hit save let's take a look and there we go when we scroll it starts fading out awesome perfect and let's see if it comes back and you can basically do the same thing to you can do the same thing to the last text I can't just do another scene and enemy that whenever you want so thank you very much for watching this episode enjoyed this little tutorial and also it's Halloween today so I'm gonna go spend some time watching scary movies with my girlfriend and I did have a costume even though I'm not in a costume right now I'll post up a picture here this is me I'm a pirate yeah all right that's gonna be it please let me know what what did you dress up past and leave it down in the comments and I will judge you and until next time make sure you purchase the new dev at pro 999 no stand included

Channel: Dev Ed

Views: 346,931

Rating: 4.9528422 out of 5

Keywords: airpods pro, javascript tutorial, apple, airpod pro, javascript animation, javascript, animation tutorial, apple website, video animation, javascript video, scroll animation, javascript scroll animation, airpod pro animation, dev ed, web development, web development tutorial

Id: wLUJ9VNzZXo

Length: 30min 12sec (1812 seconds)

Published: Sat Nov 02 2019