Using Three.js with GSAP ScrollTrigger w/ Steve Gardner!

[Music] hello and welcome to creative rodeo thank you for joining us uh we have a phenomenal phenomenal guest today um but if you have not been here before this is basically the show where we bring on creative developers and we learn uh some fantastic techniques from them it's it's more of a show where uh we want to learn a certain topic and we bring on someone who's great at that topic and they kind of walk us through it and we're able to collaborate with them so our guest today steve has uh lots and lots of knowledge about uh green stock scroll trigger and 3js and oh my gosh lots of follows thank you so much got it right over my face i don't know why i placed that there let me do this um yeah so our guest today steve he's got tons of uh 3js and green stock experience and we have kind of a general idea for where we want to go but there's nothing like pre-made that we are working towards we're both kind of going to be collaborating and building together and i might say hey what if we did this and see if we go sure great or i have a i have a cooler idea right um but so yeah that's what today is about we're going to be learning together chat i want your suggestions here i want you to be piping in saying it'd be awesome if this thing spun around and did a cool thing and we got awesome suggestion chat chat thank you right so it's a whole collaborative thing we brought on i i appreciate the follows i'm gonna acknowledge them in a second thank you so much uh this isn't me uh hating these follows i just wanna make sure that you can see me um but yeah so it's going to be a whole lot of fun without further ado without any more uh absurdity from just me let's bring in uh today's guest steve garner steve how are you doing hey i'm good how are you i'm good i'm good and chat let us know if there's any audio issues okay don't don't um worry about just dropping them in right there uh i i i would rather fix it now than find out after the stream that you emailed me and say hey no one can hear steve so just let us know um and thank you for all those followers quesor and rudix world and caseware again and uh isotoxin thank you for all those follows so so fantastic and ben's here we got mike here we got anthony here uh i saw liam here liam's on next week i'm super excited about that lots and lots of people are here um and most of all steve you're here and well steve you're back you've been here on the stream before but not this specific show but um people might know you from your beet burger i'm actually gonna bring that up real quick but uh do you wanna kind of give a brief explainer about who you are what what what you like to get up to sure sir yeah so i'm steve i uh i'm a developer uh we the collective um uh yeah and i kind of like uh but that's recent sort of that that's a recent thing and i'm thrilled about it i'll explain why soon but keep going you're doing great yeah i guess most people online might know me from like co-pen and stuff so i do a lot of coping like trying to i kind of do that mostly to learn new things which is kind of why it's all over the place like i might be doing an svg thing one week and then the three json sort of things better yeah yeah yeah exactly yeah but uh yeah it's kind of my thing just like playing around with web stuff and yeah no so and uh we the collective is this fantastic agency um where our friend liam works and our friend andy and a couple other people um work and and uh yeah i don't know who all i can shout out from there but now you are there and it's i'm just i'm just cheering in the background because y'all are like some of my favorite developers and you're just you are literally we the collective advising into one place and i can't wait to see what what you come out with next um but uh i want to show off some of your work real quick um so what people might might know you from on this show is this fantastic beet burger um hey alastair good to see you and amit's here uh and liam is shub there in in the chat and thank you for those follows um so this we we built for the heavy metal burger joint theme um and when i say we built is that you told me what to type you made this um and this is a hamburger or cheeseburger rather that turns into a drum kit uh it's all in 3js uh it is fully playable people have hooked this up to their actual like um drum kit like an electronic drum kit i guess is is what those are called um and that they've they've actually been able to play this with their physical drum kit you can play with the keyboard it's super super fun um people loved this and this was a blast to build on screen on stream with you and oh shoot uh i realized that today's steps are wrong i'm just gonna wipe them out for now maybe we'll come back to them at some point i did not update those so much to update um but yeah uh this was an absolute blast to make and it's just so so so fun uh mac good to see you adrian uh says every show alex has uh show beat bro oh yeah every show i i do show off burger it's kind of the one that like i kind of keep going back to sorry um but uh and ryan lebarr good to see you ryan's gonna be coming on uh next month i'm really excited about that um and then you have a whole bunch of code pens i think this one might be one of the ones that we um want to look at for today yeah right so we might even like reference this one a few times perfect i'll i'll keep it open then because this is um 3js and scroll trigger right you you made this when scroll trigger first came out as like one of the initial demos i i believe yeah i think it was just after actually i was i was going to but then i think i got it got out just a touch late but yeah it was just after got it yeah so as you scroll through uh airplay tips around i love the details of like the clouds covering the text like so many nice details there it feels like there's actual depth to this whole thing um and then this is like the the sweet sweet i just love that transition where it just dips through and then we get some specks on it and it's just it's i'm scrolling a little too fast but really really nice touches here and then it uh flies back out and it ends and it's just it's just super super cool and so uh i i asked you to come teach us how to do this basically right like can you kind of show us how to make a 3d scene that's animated through scroll because there's a whole ton of um uh like implementation possibilities with this kind of tech right like you can have like say you're doing a thing for uh a pair of headphones right you can have them flip around and you can show off like the noise canceling over here and then flip around and it shows like the comfy ear pads and right like like a really cool interactive experience rather than just like a jpeg that that has like lines pointing to different parts of it right you can have it really eye-catching and um interesting and and i think a lot of people myself included would love to learn from you how to do that so that's what we're going to be going through today yeah and hopefully it's not going to be that complicated as well i'm hoping from my people it will be a bit more approachable like it won't seem like this thing that's all that complicated i was kind of hoping that's my hope from all this like um i was hoping to to make people say this is too complicated and walk away from programming forever it's i was hoping several people quit their profession today but if you want to go the other direction we can do that then yeah i don't know i think sounds stupid we can go for your idea it's it's fine it's fine we can go for yours all right all right all right people are just like ugh too much too much um so i'm going to catch up on chat a little bit xanadu says 3gs is very cool i used to make human and blender uh to get 3d human model whose body measurement can be changed via their sliders so that's cool so you can like pass properties to the model that's really cool wilster good to see you hey christina good to see you thank that you thank you i'm thankful that you were able to make it for any amount of time it's always good to see you um cliches now vj with the puns good to see you vijay um and andy's here she's just talking about you uh nice to see everyone excited for this one yeah it's gonna be great so um where do we wanna start um hey simone oh i just closed out of the thing that i was going to tab over to reopen close tab um so you've passed me uh a couple of links one of them is this uh template and i'll drop this link into chat this is kind of the uh the show the show link if uh after this airs the uh video should be up there and right now i've got a couple of links there this is still like a work in progress page but for now you can access the stuff that we're gonna be looking at here um but yeah so you sent me uh a template and we're also gonna be checking out uh the poi monders i don't know how to say that that term if you do go for it um no no no clue it's like one of those many words that i've never said out loud and i i don't dare even try like yeah it's tough i mean yeah we're working in a visual and audio medium it's there's it's hard to get around it uh but we're gonna be working from their marketplace um because so playminders is kind of the group that among a lot of other things does react 3 fiber and so they're really great at like shepherding uh 3d on the web and so they were able to kind of create this marketplace that holds lots of cool 3d stuff that we're going to be able to use in our project right yeah and actually yeah they they make the 3gs fiber isn't it and that's that'd be actually perfect for this like this is this that's a tool that would be really great for building we're not we're not going to use it today but but if you were in react already and you wanted to build a thing like we're about to build then i would recommend that because that would make your life a little easier again i didn't want to add react into the into the mix today so we're keeping it safe right yeah yeah it was kind of or was it not a little bit not no not fiber there was a little bit of reacting there but it was just to get it get get things on the page cool um we won't do that today but sounds good yeah so if uh maybe we should start on that uh template and that template like anyone can run it creates a new uh pen for for you so if anyone's uh wants to you know open up on on their on their coping it will create a new um yeah but just make sure that uh yeah can can someone try this on your end and just make sure that i'm not linking to i'm i'm pretty sure i'm not linking to my template now but i just want to make it i think yeah if you hit save it will change that europe okay yeah yeah so uh i totally forget about this this codepen feature uh where if you use template it's just going to allow you to create your own and have to fork it that's that's awesome yeah yeah it's really nice um so i think it may be a good idea just to run through what this is because uh like all three js projects there's a little bit of work you have to do to get things up and running okay i didn't want to spend like 20 minutes half hour kind of writing all that so it's kind of that's this is kind of it written already so maybe what's worth doing is just for now if you go into your js and just comment out a good chunk of it and we'll uncomment it and explain it as we go so maybe all the way from from the near the top if you just do yes from the box from scene so see everything there down we'll just get rid of all that cool and then we'll uncomment as we go i guess i could just move uh the thing oh hold on i'm screwing up with the keyboard there we go cool all right so yeah so i'm just going to run through what maybe we just start on html so this will be we know what we're looking at so html's got two things uh just a container that's all it is a container for the canvas okay 3.js will put put its canvas in there later and then the um the page which is where we'll put all our content cool um and then in the css you'll see that uh canvas container is a fixed position so it's always going to be at the top and fill the page okay no matter how far we scroll it's just going to always be there okay and it's uh behind so z index one and then the pages and index two so the page is gonna sit on top of this um fixed position campus okay and that's kind of all there is right now so there's a blank page and then i stick in a console clear i always do that on codepen because copin refreshes an iframe or something and that doesn't clear the console log okay so that can be a bit frustrating so i just clear that every time and then and then we're importing a bunch of stuff so we're importing three and then we're we'll have to import something else for three later but we'll we'll add that in a bit later okay and then we're pulling in gsap and scroll trigger which there's no we're not using that yet in this code but we will be later cool and then we just need to register the plugin all right and then there's just some um colors and some pie pie's useful later so i just saved it rather than like math by every time cool sounds good so if we um if we grab the scene part so just grab that part now so slide that down yeah and see if that changes is that going to add anything no that doesn't do anything so um that won't change anything but so what that is is this scene is for those unfamiliar with 3gs scene is kind of where everything lives so you need to create one of those and then you put all your 3d models all your lights all your cameras in the scene so that's kind of like the base thing and then we're going to say we've got a background color and now we're just grabbing that from the colors above which i think is just white right now and then uh and then we have a fog as well so the fog so if we place anything like we're going to place a floor in there in a bit okay and and we don't want that to be a solid kind of stop at the end so it's a bit of fog just to kind of blend it in and have things just fade out if they travel far back cool and then we have the renderer if we just grab the renderer drag this one down and uh people are asking about the uh new code pen looking yeah it got an update just like an hour ago or something apparently yeah um yeah oh and liam you have to set um like vim code bindings or something like that and then i can hold alt up and down like my vs code can do it normally um and i missed it i complained about it on twitter i'm like i wish that was there and of course someone's like it is just do this and i'm like thank you and so yeah now now you can do that i if um remind me after the show if you can't find it because uh it's super handy so yeah i missed that too i'm glad you told me that because that's super annoying i'm always like doing that key shortcut and it's not it never works yup cool so we got a renderer okay so we got the renderer we set the anti-alias to true so the render is what draws things to the canvas so that's kind of so you got the scene and that's where we put all our things and then the renderer's job is to draw that scene with the camera and stuff so we've got some things here this is just to kind of set how it's going to render those things so it's got the um the encoding the color how it's going to interpret the colors and the tone mapping and the shadow maps as well so we're going to have shadows in this so we're just changing we're just tweaking the settings for that just to make it look a bit nicer gotcha and this is stuff that like you uh carry from project to project or is this stuff that like you dialed in specifically because you wanted a certain look for this scene no so yeah this is kind of what i carry over and you know you know things like exposure and stuff i tweak depending on the model and the light i've got in the scene but you know it's it's it's you know you might not want to change depending on what you're doing you may not want to change some of these um you know but this kind of for me seems to be a good set of yeah and so i'm just trying to think with that for myself if i want to submit a project tomorrow can i come here and steal these or is this a thing where like from project to project the same way that like you know if i'm doing a website i might set up a whole bunch of color variables and change my fonts and change you know like like those vary wildly from site to site but some stuff like this like can this be relatively constant and you're it sounds like you're saying yeah you can just use this for i certainly start with this and then change it when i need to and you know i don't always have to so yeah i think it's a good starting place cool um yeah and then so we grab the container from the dom and then we tell the renderer to to place its canvas element in there so we're appending the canvas elements the renderer generates a canvas okay and we place it in that container okay so that's why we now have a black box in on our page ah i got it okay so the and and so we have a black box let me see if i'm understanding because we've created a scene is this getting the scene yet no yeah no this is all the render at the moment cool so it's just a renderer and so there's no lights there's really nothing to paint so it's just painting we've not we've not even told it to draw anything yet oh it's literally a blank canvas okay got it if you were to look at that it's got like a d i don't think it's even got a defined height and width right now it's kind of what the browser does when it throws the canvas it just kind of draws one that big got it okay so cool we're gonna make a camera now and the cameras are pretty simple so it's just um a perspective camera so protective cameras are um like it will show uh things will get smaller when they get further away and that kind of thing you got um what's the other one called um orthographic that's right yes and that's kind of like everything stays the same size it's kind of like um yeah i think of that one with like a monument valley kind of like i mean like it doesn't have to be at that angle but that's like the the isometric view would be an orthographic camera right yeah exactly but but yeah orthographic just means like it things that are far away aren't smaller everything is pretty much the same size right or like yeah okay yeah yeah that's right yeah um and then we just set some things so i think the first one is um the uh the the lens sort of size the field of view and then we've got the width and the height and oh that's actually the ratio it's the width divided by the height and a few other settings i think that's the near and far so the the number one point one is how close we are allowed to render stuff and then far how far away it will render things before it will stop got it yeah i've definitely dealt with this in like blender where as i zoom in on something it starts to like eat away it starts to disappear a little too soon you have to drop that to be smaller or if things are far away they start to disappear to make that bigger it's basically like yeah and you want to try not to make that too big you really want to sort of dial that in so it's right for your scene because if you make it just infinite then it's just not going to be it's going to be using up the cpu and what have you that you don't need so you want to get that right so that's this is going to be fine for today yeah and then we we position it so we're sticking it slightly up and slightly back um well that's x x is in the middle so x is it's just so like like on normal screens they're sitting right in the middle of the scene and then it's um it's one up i think one is um so y is up because it's one up and then two back got it okay cool and those numbers don't really mean anything it's just like a a scale that's like you can assign it to whatever we could call that meters or we could call that miles it doesn't really matter it's just the unit right it's just yeah exactly yeah one unit and then and then the target which is just a vector three right now and vector three is just a way of storing x y and z and that's um that's just set to zero one so a little bit this is right it's looking right in the middle of the scene but up one unit and that's not doing anything right now we're not told to do anything let's just say it's a save for later and then we add the add the camera to the scene so that's all we do so that needs to be in the scene for it to work makes sense and then we've got the lights cool and cool so we've got a directional light and that's kind of like directional everywhere so it's kind of it's shining a light in one direction from every kind of point in the sky isn't it it's not like i am what's the other one spotlight where it's coming from one point directional light is coming from everywhere but from in the same direction um and we want that one to cast shadows so then you want to again this is one of those things where i've kind of just sort of gone with the defaulty ones um but you would in reality want to tweak this so the camera far is how the way this works is it kind of takes a picture from the lights point of view and generates a shadow map that's called so the the cam the light itself actually has a camera that it renders so we need to say this camera can see 10 we don't want it to see like 200 because that's just going to be more work because it has to render that and then it renders the main scene so the more you know the more the further it does the more work it's got to do and then we're saying how big we want that that picture essentially to be uh and normal bias i don't remember what that is but it's it's 0.05 it certainly is someone in the chat might know i know what it says and then and then uh and then the position which is oh that's where it's going to live cool and then we add that to scene and then um and then the hemisphere light is um it's a light that lights two different colors from different directions so there'll be a skylight so point it kind of shines a light down or one color and a light up on another color which is useful if you want to kind of simulate a reflection from the ground or anything like that cool so we add that to the scene real quick on the directional light um am i missing where we're setting like the angle for it like you know how directional lights come in from all over is is that the position set bit yes i think i think by placing it up there it's kind of that defines the angle i think that's right okay so we're saying it's there so it's pointing that direction kind of it's always trying to point to zero zero zero so if you appear it's pointing got it so that's the d yeah so it's it's gonna point here so wherever you move it it's gonna got it yeah all right um and liam says bias just modifies shadow edge density not sure what the default is cool yeah i remember now uh well i don't know what the default is either but ours is uh 0.05 i do know that and that's perfect yeah that's exactly what we're looking for here uh okay rule says docs say that the default is zero and we don't want that we don't want zero no we're not close but not zero yeah cool so we're playing so we just want something on the ground um so the plane is just um just just the flat surface it's a hundred by a hundred and then we're giving it a material which is the color of the ground um and then they by default come in at this sort of like facing towards you so we just need to rotate it so it's fitting flat and then also we want it to tell it to receive shadows um and then we add that to the scene too okay so uh so this part's the one that flips wait no this is creating okay so what was the yeah so you got two every everything every kind of thing you add to the scene has two parts to it as geometry which tells you what shape it's going to be and then a material which tells you what it's going to look like and then you kind of combine those things into a mesh and that's what gets drawn to the to the scene so we need we created a new mesh and it's going to be this shape with this material so you do that on almost everything so that's what the floor is now um and we're telling it to receive shadows from the lights and we're going to um and let's say rotate it back got it that's that's the rotation bit got it okay cool and then so yeah and then and then so on resize uh does what it says on the tin it it kind of it creates it makes sure that this uh this box fills the screen so now we're not now we're filling it that's all that's done as i resize it will continue to yeah because of this event listener here right i'll continue to fill the screen right yeah and it's got to do it's got to do a few things because it's not all well and good just resizing the the canvas but you also have to tell 3js what the new sort of size is and it updates the projection matrix so that no it now knows kind of what ratio to draw all those things at got it now you also changed their plate right like this yeah yeah yeah yeah just exactly and the same with the pixel yeah and then so also the pixel ratio you want to set at this point which you've all you can already you can set that once and leave it but when you when resize gets triggered when you change monitors as well so if you were to drag this to another monitor with a different pixel ratio it triggers a resize um even if you didn't resize your browser window it triggers that so you can then then adjust for that pixel ratio oh that's cool it's good to do that here never thought of that that's really cool awesome um that's all that is awesome but we're not rendering anything still we've just got a big black box still and we should have a floor which has some lights so this is what the last bit is doing we're telling it to draw every 60 frames a second got it so tick uh okay so we're looking at the camera everything in the camera yeah we always want the camera to look at the target that way we can animate the target and we know that on every tick the camera's just going to adjust itself to look at the target um and then the renderer we say render and we give it the scene we want to render and the camera we want to render it from so you can have multiple cameras in a scene and you can flip whenever you want you can say actually you can actually start rendering from camera too and you can be like some sort of tv director and just switch cameras if you wanted to but we're always just going to render from one camera and then we ask it to to do that every every animation frame cool and then so that's the boilerplate nice yeah awesome and so that's kind of everything we need to kind of get the 3js rendering so now we need to do a whole bunch of things i guess we need to think about what we're going to build i think that's the first thing we need to do yeah and then we need to do the html i think it makes sense to do the html layout first and then bring in some of those assets and then we'll start animating them to scroll so i think that's like our three steps cool so chat as promised um we we don't have like the the finished version like sitting off screen to kind of go ha ha we you know they made this we're looking to uh kind of get ideas and come up with with something to do we steve steve had an idea um i'm sure that you would explain it better than i if if well i think it'd be nice so so on the same theme with kind of the airplanes it's kind of nice to have that kind of transition between states because that's kind of fun too where it went from plane um to blueprint um it doesn't have to be to a blueprint it can be to whatever but it'd be nice to add one of those and it'd be cool to sort of have some i thought it'd be nice it'd be fun to have like a comparison thing so we could go like something versus something or and then we could have like a winner at the end of the page so we could have like you know two objects so we'll scroll down we'll have like the stats for one of those things and then as we scroll up we'll have the stats for the next one and then and then and then we'll just maybe we'll randomize it every time every load and one will be the winner at the end of the page i love it like something a bit simple and so silly as well like i like the idea of comparing two random things and we can just do silly with it yeah i know i i think it's great where like uh you know i'm thinking something along the lines of say this skunk is one of the things and as as we scroll it like zooms in and like maybe like circles the ears or at least points to the ear and says like superior hearing abilities right or yeah yeah i mean on the skunk you might point to something else but uh they're gonna be like like yeah like it would circle like the nose and be like you know elite sniffer or yep some some some stats like that that kind of uh that were kind of stealing from like this wingspan right like like the stats bit so uh and then it would i think it's important animal or something yeah i think it's important that these things we can i think i like the idea of comparing two very uncomparable things okay and comparable things like i really like the idea that would compare like an animal to a sandwich or whatever like like the winner will be like something really some random reason yeah yeah skunk versus taco skunk versus taco that's that's quite the match up okay skunk versus taco might be there um one thing we did want to consider because um uh we we want to try to choose one that's not too hefty right is that something that we're looking for i mean we could do and we can render all these things without too many problems but what to do this i'm thinking in my mind that it'd be quite nice to have this the main scene which has the floor in the shadows and what have you kind of the start and then it goes into maybe like a blueprint version and then ends on like a trophy version which actually means we need three of every one of these objects we're adding so we can we'll have to animate all three at once which is how the airplane one works they're actually the airplane there's two airplanes on the scene and we're rotating and animating them at the same time and we're kind of masking one and showing the other there's actually two airplanes there so anything we add to the scene we're going to have to render two or three times or animate two or three times which again like you could probably get away with it on a lot of these models but let's just make it easy for ourselves today and and just give them a bit low poly yeah let's be let's be a little bit uh what's the word um responsible oh here's here's taco so we do have skunk and taco um what are we thinking i do wonder actually how the skunk would look it has some animations built in so i'm not too sure how yeah and we could try and do that work and so one of the great things i've noticed about this market dot point pointers i'm i'm just going to keep saying monitors uh lucy is that a french word that i don't know it sounds to me to be potentially french but i am also a very un uh uh unsophisticated if it is i don't know it it's probably french and you probably don't know it even though your native french speaker um it's probably that i'm probably right is is my guess the odds are in my favor for sure um anyway thing i like about this site over um google poly which is uh sadly no longer with us is this bit of oh it doesn't have a download starter project interesting they don't all have yeah we don't need that today anyway so we'll let them know oh oh i think it just had to load maybe because now we have it or maybe it generates them on the fly might that's super cool so yeah the the fact that like this is specifically um built with this use case in mind of you're going to be bringing it to react3 fiber or to 3js it's a romanized greek word thank you lucy appreciate it still have no idea how to say it or what it means but let's just keep going uh oh here we go written in greek liam coming through with the all right we have to let's see real quick uh what does it mean what does it mean i know less now oh it's a deity or attribute of god or mind mind okay it's it's something about your your brain it's about your brain all right let's not get too distracted i'm so sorry um yeah wikipedia rabbit hole for sure all right so uh where are we uh or if if we're running with skunk versus talk and we have two votes for skunk versus taco uh i guess we should then shouldn't we yeah i think we may not have the animations up that's all so will them i don't know how that would look on a blueprint screen that might just be a bit plain but yeah we can always switch it out it looks a bit rubbish we just yeah yeah yeah switch it out whatever it's actually not too big a deal so we can we can go with it for now and and we could always just like run run like this whole site again on another couple liam says just just tessellate it just add more polygons to it in the blueprint you mean i i think i assume that's what that means i think so it's kind first the sandwich also works everything looks good tesselated cool all right well we can give that a shot if uh if it's if it's looking boring all right cool so uh where do we go from here maybe just grab or should we just grab those first and just download those yeah we grab the model so so the microphone and just download the model oh interesting okay that'll download a uh a gl i went through this last time tonight gltf gl yeah because of webgl gl tf yeah yeah that's right yeah yeah this is that's what we did last time yeah taco yeah i was saying all the all the combinations of that um now do we put this into our assets on codepen yes please cool um and if if someone doesn't have a codepen pro thing where would you recommend they well interestingly so if you go back to um the the um let me do that you know that's really it happened to me too you have to like select it for some reason it doesn't like the um drag in those files and there for some reason yeah it's funny it might be oh they're already named that's nice yeah um if you go back to the market the download page and click on one of those there is actually so go to one of them okay copy directly oh that's happy i don't i don't know what the deal is with them hosting it for you but it does appear to be that's really handy okay i didn't wanna i didn't want to just yeah well i mean it seems i don't i don't remember the bandwidth things with super bass but looks like they might be getting some storage through super bass and you can use them right from there so that's cool yeah yeah maybe and if not yeah i mean i guess if you've got like net the fire whatever you can host it on there and just throw it up on somewhere cool all right nice um so yeah with these we'll leave that for now so i guess if it makes sense if let's say we're going to go with a an intro screen that says i know taco versus gunk of course and then we're going to scroll down and we'll go to the taco screen and show some stats there and then and then the same for skunk and then we'll go to the winner so we need a whole bunch of sections just to do that and the way i like to do this is have just each section be full width full height and it makes life a little easier for this um you don't have to do it this way i just think it'd be easier today so i think um if we make a section just in page just make a section with a class name section or yes we could yeah that would do yeah um and then in css let's just make sure that that's always you know width 100 height 100 or um vertical width right section just like that cool yeah and actually you know what let's just add an outline to that as well just a red outline just so we know where they are just so we can see oh actually outline yeah so it doesn't affect the size good call cool and it's add a few more of those in fact this might be worth just naming them as well so if we go section and then give another class name called um you know section well okay so maybe we want a what we can do with this is uh when once we finish loading the assets we kind of want this we could have those things just appear or we could have them come in on the first kind of start as we start scrolling we come to the first title page so maybe the first section is kind of just say start scrolling section or like maybe versus taco so i think maybe yeah yeah i mean i think actually it may be nicer to have that as just um the scroll and then okay skunk versus tucker can be a part of the animation for the next session got it instead of animating scroll down or start scrolling cool uh oh let's make these flex as well just so they get rid of because what happens is it's adding is taking into account the padding and merging from all these uh elements you just make that flex and that gets rid of all that problem cool did you ever think when i'm like hey you're a professional web developer would you like to come on and teach us about professional web development that you'd be saying skunk versus taco multiple times throughout that stream i mean last time i i had to turn a a cheeseburger into a drum kit so i i don't know which ones i don't know this is i think this is the this is the dream i mean burger drums deny but the skunk versus hacker was the dream all along we need to settle it people have been yeah yeah it's been too much for too long this is an important question of course okay so let's let's add all our sections i think that makes sense to add all our sections in now so we'll have um let's just call that one you know skunk stats skunks that's cool are we adding the classes yeah let's do that just because um what might make sense is um like we'll probably have sides for each thing so taco will be on the left and this gun could be on the right so um we may want the skunks i can't say it skunk stats to be you know um flex justified to the flex end so you know so we can we can adjust those things separately got it okay so we're doing taco stats here yep cool and then let's for now just add one more which will just be the winner skunk tacos liam says yeah okay is is there like a grinder one like that at the end no one's the winner sorry skunks are precious animals they kind of like them um all right so uh yeah we got scroll down skunk vs taco skunk stats taco stats winner nice all right cool so so how we're going to do this so so when you do a skull trigger there's a number of ways to do squat trigger but the way we're going to do it for this particular thing is we're going to say each animation is one second long and time doesn't matter too much like this animation this timeline could be one second or it could be two minutes long it doesn't matter because we're assigning it to the scroll so we're kind of scrubbing it like a youtube video scrubbing that youtube video we're going to be doing the same we're going to use the scroll to scrub through this animation so the amount of time it takes is sort of irrelevant but if we split each section into one second intervals that helps us then find when the next animation needs to start so that will become clear later when we start doing it cool but that's kind of how we're going to run with scroll trigger it's not about um the time set to the timeline uh that determines the speed but it's how fast i scroll that determines the speed of the video truly right well yes that's assuming that you're um scrubbing so you don't have to so you can use scroll trigger to say as soon as it's in view just run this animation and animation can actually just run as if it's been played like normal so then in that case time would matter because you'd want it to take one second to appear or whatever but if soon just say scrub equal true it then becomes irrelevant it's now being controlled by the position of the of the scroll bar cool all right great and we may do both on this so what makes sense is we're going to have one kind of like main timeline which is going to do the animations of these objects as we scroll down but then we can have like for example the stats that come in they will be separate gold triggers with separate animations that just run when that particular bit comes into screen it's just going to run the little animation and then it will just carry on okay cool awesome all right um so i guess the first thing we should do is um load in these these elements and stick them on the on on the scene so we're going to need um we're going to need the loader so that's going to be that we need to import that okay at the top there we need to import the gltf loader like that uh yeah so i got it i got it here too because i never remember i always have to look this up no worries and then it's in um so it's in three examples jsm so as you start hopefully it's not gonna do it here is it nope oh it's uh so copy this yeah copy skype yeah and then slash examples and four slash examples jsm uh loaders and then the gl gltf later like like you have on the that's it yeah it's actually bringing in the loader um and then we need to sort of um define what we're going to load so let's go down to the bottom here so we're keeping this simple so we're just going to do um we're not going to do classes and we're not going to move all the code around so we're just going to kind of do it in order which isn't the greatest way but it's just quick so if we make a new um a new array just call it um to load or something that's what we're just going to run through to load cool um and then we'll um make these objects and we need to define the file which we'll grab on the assets panel missing keys here we go so file uh let me grab skunk first is is file the key that you said uh what's that um yeah that can be yeah that's fine it doesn't matter what it is yeah file makes sense um and then we're gonna need to um let's just go with that for a minute we're probably going to need to um store the loaded file somewhere too okay let's just go with the file for now so that's it so we now need to run through that so on load to load on you know for each wait what unload bash yeah so well so on to load for each so we're just going to loop through this array but we actually need to make our loader first so we need to um create a well we need to create two things before we do this if we just just above this okay just above this we just do yep we need to create a loading manager so just make a loading manager equals new three loading manager like that yes it and then that's going to be a callback too so we want that to that will be called when everything's downloaded yeah so once everything's loaded that will get called so if we run a little function in there um and we'll just um have it we'll leave it blank for now but in there we'll put a little um you know a little setup animations function we'll call that somewhere okay and then we need to make a gltf loader as well which we'll then use to load uh should we just call it loader because we're importing or should we call it something else uh oh lower case would work and then that's new gltf loader and then you need to pass the loading manager into that so it knows the password look what what the call so we um we will need to um well so so now in the in the load loading for each so we can bring that back in now so you don't need to make a new gltf loader for each one we just use the same one for each right makes sense it will just do um item or whatever yeah and then we'll just do a gltf um loader item file and then a callback there so there's another cool background circular one that's yes it cool and then that's gonna that's gonna bring back the model so maybe put a model in there i think so that's gonna be our model that's just loaded cool um now just to get it working we could just do scene dot add model and just see how it looks hopefully they will have two things oh well we've got an error yeah we have an error let's see what that is just loader is not a constructor is it not um am i importing it right do i need to it might not be anything if this link is wrong let's have a look from cds going back there are three examples gsm loaders gltf loader that looks right do anything js or something am i i'm vaguely remembering something like that nope doesn't seem to do anything just make sure we've got something there see what that is just comment this out real quick that's not how you comment on things nope that's still not how you do it there you go it's a mystery how to do that no so there we go no that'll be it then so let's see where we're going wrong there so oh oh hang on go back did not i did i did not how did i what just what did i what cancel what did i just click like that's weird sorry i was so that's all good um let's um let's put that in the curly brackets that's probably where we're going wrong okay so i wasn't sure let's see if that uh yep we got a gltf loader now cool good call all right so let's try and add that to the scene again let's get rid of this oh another area oh yeah see where we went wrong um is it gone era might be gone huh look at the console then because i should be working we should have it oh we've got ad model for some reason just add ah okay got it i i took ad model as add model a function yeah that makes sense that makes sense all right still gltf loader is not a function um are we new gltf loader loading manager oh dot load so jltf loader dot load sorry that was my cool no worries getting closer 3g rtf loader no traco loader ah right okay so this is where we're going so so some of these models are going to be compressed that's what the draco loader is um we could fix that but it's going to be a bit of work so we might be just better off than just choosing something different okay because just because it's the easiest but the best way to do the draco loader is to run it as a because quite a processor intensive things you kind of need to run it as a web worker and that's going to be difficult to do in coping so let's just i think we're better off just choosing something else let's let's find out which one it is it's probably this one it's probably the same imagine it's this one so wait yeah actually what let's um let's in the to load because we're going to need to name these so in the too late let's let's name each one of these as well so we've got file and then let's give it a name too so we'll need that later anyway so and we'll just console log out the name oh let me just so then in here uh well that actually won't help will it because it doesn't necessarily mean that's okay it's probably oh it's a taco then maybe let's see i don't know that might not work because it's not it's not synchronous yeah i'm taking it that's not gonna oh yeah that's the idea okay so taco yeah oh oh so you're you're blaming the skunk you think up it looks like they're both that actually hmm both trick or loaded so all right let's just try another one let's see if we can find another one that isn't yeah is there a way to tell from here extension trigger draco measure compression right let's try and find out it doesn't have that extensions request so we need two for that one interesting all right let's see about pirate chips uh chat can you help us out um see if you can find something cool that does not have a little requirement here with extensions required draco mesh compression if not we might be able to figure out that draco mesh compression but if you can find something cool it seems this might be honestly the way they do all of them i don't think so i think i have loaded one or two of these in before without again i'm pretty sure cool let me know if you find anything chat uh let's get this iphone x draco compression oh no zombie car draco compression uh we might have to fix this didn't we no worries stairs oh here we go the witch doesn't have any interesting i would not expect that uh where's the witch the druid the young corrigan nope nope it's a witch looks like a purple witch okay i'll keep scrolling maybe near the bottom of his alphabetical order there he is back up back up oh ah nice okay cool and did these animals then i'm guessing these are all similar they look similar don't they yeah yeah here we go maybe we can do an animal comparison what do you think well bear versus which paper is a switch that works or duck versus which i don't know what's funnier okay isn't there like a a monty python thing about like if if if if the which if someone floats they're a witch so we could do like you could play on that like the duck can float but the witch doesn't float sadly i i i have to break it to you that it's not a monty python thing it's an american salem witch trials thing and it was not it was not fun yeah that's that's a uh okay but it it wasn't mentioned in monetary yes yes it was it was referenced because it was a real thing uh but yeah but we can't do it right so maybe if it's a real thing maybe that wouldn't be appropriate oh good uh i think liam's yeah linking to the witch burning trial thing yeah and well actually you know what it's definitely not just an american thing it's probably the crusades also it's probably just yeah it's too soon thank you very true i still haven't gotten over it uh louie is here i can only stay for short time and checking to see what's happening here yeah we are rich you came in just at the right time uh good to see you i hope you're doing well uh we close out of that okay so which versus what um basically anything made by k lousberg seems to be uh fair game do we i think you can probably click on her name and or their name i could call that is a link all right so lots of cool stuff yeah i don't know yeah i think okay uh witch versus animal of some sort here let me see actually uh let's actually do uh i was gonna do a poll but that might take a little too long because i can do that here and i like to sometimes remember that i have powers in twitch um all right what do you think witch versus bear or duck elitist here hey olivia good to see you and adam's here oh man twitch witch tuck this website with free 3d models similar to rip google poly yes but i think the better um the better um what's it like um successor is the word i'm looking for is poly.pizza this actually has the um the poly by google stuff where uh the poi monitors market doesn't have anything by google but it's still a it still has a whole bunch of stuff and it's in that same spirit of let's give three assets free assets for the web um i think these ones are going to be a bit tidier they seem to put a bit more effort into making sure that they're they're like because i you know you can see with the download options they're just a bit more kind of set up for this whereas polly might be a bit hit and miss on the size and and the materials yeah um just for the sake of speed i'm going to uh uh not upload this and download this but i'm going to just paste in bear and see if we can get it oh that's beard uh see if we can get bear working oh uh and uh which baron witch right those are the two that's taco sorry skunk versus taco we'll have to have a rematch at some other point um but which versus bear is quite a match up i copy direct link and let's see what we got dang it not a not an instance of three dot object 3d oh we need to add the c yeah that's that's my fault so we need to add the scene so we're telling it to add everything but actually we need to add the dot scene okay cool well that's we we got a step further that's awesome nice that is a horrifying mashup oh my god okay we've combined them we we meant to do bear versus which we did bear plus witch and i don't like it i don't like it yeah that was not something we needed to see was it it's not that's not the answer we needed hold on just hold on i gotta read chat real quick um adam goes every time i'm acknowledged in this chat i get momentarily confused as as if i'm live on screen and i do a little wave i love that i love it i love the thought of that the bear witch project elevente phenomenal phenomenal all right cool we should maybe call it that yeah we do need to go back actually and rename all our um uh our html things because we got tacos oh yeah we do we do we do okay uh so it's coming first to taco bear versus witch bear stats which stats awesome all right cool and now so um just to make life a little easier well first thing we need to do these aren't casting shadows but um let's move the camera back a touch actually because it's really close up isn't it i agree i'm comfortable uncomfortably i i'm not looking in this direction actually yeah i'm i'm keeping my eyes averted it's staring me down man um all right where's our camera lights camera here we go so is it it's this one that one uh yes that one so yeah move that one back all right so they're not casting shadows and we want some shadows so what we need to do is once we load it in the first thing we need to do is um run through the scene and just tell every mo every material to receive and cast shadows um the code for that is oh we need to traverse that's the word i was looking for so we need to go model scene traverse and that will go through and grab everything just reverse that like that that will go through everything that'll deep dive through the entire model and pick up everything is that a function that's on scene or is this something i just that's unlike arrays and things that i've never used that's on any 3js okay so it's specific to that prototype okay got it yeah yeah so but you can do it man pretty much anything you do on a group you can do it on it's just a nicer view on a scene it's it's it's recursive and it'll go through everything like it'll go down every tree cool awesome yeah yeah so you say let's um let's item or child might be worth doing child just so we know we're looking at here um and we just want to quickly check it's a mesh because they're not all meshes some of these are going to be groups so we want to do if child instance of child uh space instant instance of yeah and then three mesh so all caps over score right there yeah that's it so so if it's a mesh we want to say the child needs to receive shadows true and cast shadows true perfect and then awesome uh and then why is that not working i should be working now am i getting these properties correct let's check let's see what if we're actually getting any of those three mesh okay we're getting stuff yeah it's getting these but receive shadows is is that the right property see shadows rest eve oh shadow shadows that'll be it good catch nice there it is looks great so um we could just add this now we have just added this to scene but i like to put these things in groups just in case we need to um animate so we might not do this today but it's useful to be able to animate the whole thing and maybe individual elements inside so if we wanted these guys to sort of animate it's like fall in we can animate the scene of each one um but then we can also animate the group so it doesn't affect the scroll trigger kind of part of it so let's create if you scroll back up where we're defining the on load yeah if we just um add another thing to that so we've got name got file let's add a group as well so the group that we're going to put it in so you can print this format wow that's spaced out but oh wow okay um that's just good i just added a whole bunch of and it's actually going to be a new three group capital g for group yeah yeah yeah all right and then and then we'll do this and then the comma there just cool thank you for the followers appreciate it welcome um you can either you need a comma at the end of those groups i sure do cool and then we're going to add a group to the scene and then we're going to add that the child the the model scene to the group got it so yeah so instead of this we're going to add um uh wait what do we [Music] and then the model says what you just cut out that one and then we'll add the item group to the scene just it just it just gives us another thing we can we can animate and and and play with so um now um just make life a little easier later on because i don't want to have to we'd have to go through this array just to find them the witch and go through the array to find the bear so let's just create a new um or object called models um just above this or whatever and just make it empty for now cool and then down here we'll just say models and then name god uh below the scene doesn't really matter fine so models dot or item dot name equals item group go now we can reference that later so now that's all working and it's all loaded in so now once so now we have two models being loaded we can go back to the model manager a loading manager sorry cool and then where we've got this kind of callback let's make a new function to sort of set up the animations if we create a new function called setup animation or something so so create that out here yeah we might want to reference things outside that function would that allow that might be okay wouldn't it you want to do uh normally do the arrows around that's cool yeah do that i don't know if it makes any difference but uh equals yeah yeah sorry good there we go cool uh cool and then we just call that from loading manager at the end so we need to let's move these into a nice starting position okay we could should we have them off screen first and then if we scroll down and it says which versus bear they kind of sense yeah like they're not there and it like they they come up or yeah well so here's the question do we want to animate the camera down to where they're standing or does it because it doesn't make sense for them to come up through the floor or to like slide in from the side how do you want i guess we could do both we could yeah let's do both yeah okay that makes sense because then we don't have this weird floor so let's do both so let's for now move them slightly off screen okay because uh that's where we want them to start so if we go to models dot which stop is uh capitalized i think i did capitalize but to ask if i should drop it probably should uh which and bear cool cool uh dot position and then i guess it's going to be the x and if we move the witch off to the is it bear versus which we call this or which bear versus which yeah we want to move the witch off to the right so that's just going to be like i don't know five or something of course and then we do the opposite gone but i don't know in which direction we'll see i should be right so that that way will be to the right better minus than i do cool all right nice cool uh and then now we need to set up the uh scroll trigger so we could just create a timeline here and and and then just just just assign scroll trigger to it but skull trigger has this nice thing where it can do media queries so what we don't want to do is have this really over the top massive 3d animation happening if the user has prefers reduce motion on because that's going to make them feel really bad because that's going to be a lot of stuff moving around right so we want to make sure that we pay attention to that so the first thing we need to do is um go scroll trigger so all caps so uh where do you want me to put this oh just under yeah set up so just after this uh position in this setup of course it's all part of the animation so scroll trigger like that yeah and then it's called uh match media so match capitalism media yep no no so you're right you're right cool and then it's a you need another pass an array uh so an objective okay and then it's the the first the the the key is the um is the query reduce motion basically yeah so we're going to do the opposite so we're going to do prefers reduce motion no preference so if they don't have a preference i will do the animation if not so what this is doing is scroll trigger and you could do this for um screen size as well so you'd say like on mobile you might want a different timeline animation scroll trigger make sense say you would say um so you you pass it that and then you pass it a function and then it kind of manages that so you will pass it a function and say create our animation and if it if if the if the media query matches it runs that that timeline if it doesn't it won't awesome um and real quick uh guerraba good to see you um and cassie just got in here cassie just landed right in the nick of time cassie of green sock and svg and just being wonderful fame um so cool where do we uh yeah this needs to be uh brackets in here so brackets um like you would in css so no it is a string okay um it's a string and then like in css it would be in the normal practice yeah uh no not square brackets see how do they have these like proper names parentheses parentheses isn't that no so it's a string but then it's um then it's the normal kind of non non-square non-curly brackets just the brackets that's the ones yeah parentheses is is what i don't know i i don't i think cassie calls them curly boys or something i i forget um but all right cool so prefers there's reduced motion and then no preference so if there is no preference we will colon i think it's in i think it's inside the bracket still parentheses colon yeah cool brown boys that's what it was round boys boys boys yeah it's just an easier uh thing right it's just easier yeah i think it's yeah i think that's the way that they should be officially renamed if they haven't already yep so and then we're gonna then we need to we need to make a function to do this and that would we'll just we'll just make a new function again so we'll just pass a function called i don't know let's call it desktop animation because it's kind of going to be the desktop animation and if we get time which we'll probably won't but we could have an animate a mobile animation okay uh we're not going to call it here we're just going to reference it here later so now we need to make that function too so let's just create desktop animation and this is where the fun begins cool so we need to create a timeline and that's going to be this is going to be like our main timeline that's going to do the entire animation and we might make little mini animation timelines for the rest of it but let's just make this time timeline so const yeah that's perfect that's it uh so is that for or is it lowercase uh located for gsat and it's going to be new because it's a new new timeline so a new gsap timeline it has to be timeline not tl oh unless that works i don't actually know does that is that a thing might not be we'll see um and so so as i said before like what i tend to do with these sort of things because we have these fixed height sections what i want is every kind of section to be one second long and we'll we'll explain it now so if you uh just above that now above the timeline where we just created that new timeline okay uh just create a variable so let section equal zero and this is going to be where we tell the animations where to start so um by default i want every animation to be a duration one so we can do that in the timeline we can set defaults in the timelines if we create a new objects inside there and say default equals and then we kind of just saw every animation we create will have these defaults on it so um so an object in here and it will say duration one and we'll also add a nice ease in here too because um i think the default ease is like an ease out we want it in out just so things don't suddenly start moving we want to just so maybe like a power two or something power two um ease in uh in in out i think it might be lower case cool i think it's just in and out now come on i always have to do the reference for this i always go to the ease yeah so get rid of the ease and then it's it used to be that i think you're right on the old one but i think it's just in out now i i don't give me too much credit i was just typing what you were saying and so that's what it was i'm just dictating is all it is good to see you cool and then um we may also set up scroll trigger too um yeah let's do that two here so we can so we set scroll trigger up here in as well as well so we set that up so after default we want to set up score trigger uh inside this timeline object still cool so yep so scroll trigger and then our eastern object too and we're going to listen to we're going to assign it to so the trigger is the page so the thing that's holding all these sections so it's going to be dot string dot page it's going to be like a it's going to be a query selector for page cool can you uh or or at some point you know i'll throw it right this second but explain the trigger aspect of of scroll trigger if if it'll be easier to do once we once you have it built that that that makes sense but i just think that concept took me a bit to get and i probably still don't have it so yeah okay well we've made which one for it now so it's go trigger that's the thing it's going to be like watching so trigger is a thing that it's going to say like so you can say the trigger when we come in and out of so we might say the trigger is that this section and when it's in and out that's when i think i'm saying that right so that you could so that's the thing we're going to be listening to on scroll i think that's right okay i think it'll be easier once we see it yeah like i always get markers out and stuff like that so we'll see so we want that trigger the start when the top is at the top because at the top of the page so we do start and then a string that says top top top top and then we wanted to end when the bottom is at the bottom so we do end i think it's under end bottom bottom so that's kind of where it all goes but then we also need to tell it to we play on the scrub so we now need to say um scrub so you can do scrub equals true and what that does is it does uh it matches one for one to go one on one right if you were to jump down suddenly like uh you know a page the whole animation would suddenly just appear a page up so if you set that to one one second is going to be a bit laggy um but that that would be one second so it would like it would lag by a second or it would complete the animation so let's go by point one i think point one will probably do it to be honest with you pretty much super quick we just got raided by jason langstor from crow jason thank you so much for that raid that's super super awesome uh welcome everyone we are learning from steve gardner how to do uh a bit of 3js and gsap green sock scroll trigger um real quick just to kind of give you a taste of where we're going um we so steve has created lots of 3d and scroll triggery goodness before this is actually his code pen from i think almost two years ago now no no no it was last year it was around yeah last year junich i want to say uh but yeah as you scroll through this airplane flies around and it goes through and uh it it goes into like a blueprint style and so we're learning how to do this from steve uh with kind of our own creation we had the chat shoes what we're gonna compare one to another we we settled on uh bear versus which and so we we've got them both rendered but off screen right now and we're working on the animation so we've got like the 3d models in place and now we're bringing in the um the green scroll trigger that's going to allow it so as we scroll down uh the camera is going to move the models are going to come in into the center and then we're going to like zoom around them and do all kinds of cool stuff like that airplane did in that demo so you're you're just in time pull up a chair uh and thank you again jason great great to see everyone here so thanks thanks for coming through and thanks for that raid cool so we uh we're just talking about scrub and this will kind of um give kind of an ease to the scroll right it's not going to be like as instant it'll kind of blend down to it yeah that's right yeah and because it's quite short it won't be it won't be too laggy as well so i think that's kind of a good compromise but we can we can play with that as as you see it in action um so now now we need to start undoing the timeline so we need to start animating these objects around so let's um just after the after your timeline so we're just going to let's just move something just so we can see it working so let's just do timeline 2 or tl2 and then we'll do models all right models through the witch which positions all right positions and then and then the x and then we're going to say x let's move it back to uh which side is the witch on the right wasn't it so let's say one just so they come in next to each other rather than we don't want them to merge again like they did you know right that was horrifying um but this is this is going to be relative right or is this going to be relative to where it is already so are we adding one or is this going to be setting it to absolutely so we're telling it to go to that coordinate so we're telling it to go back to one so we've set on the setup we told it to go to five and now it's gonna start at five and it's gonna end at one okay um but the thing we're going to do here is we're going to add the third um parameter that you can pass into a two so you can for a timeline see the first one is the thing you're going to animate second one is the object with all the parameters you're going to animate and the third one is where you want that to start in the timeline so we want it to start at zero but we're saving that in the section that we we created just above here we created section zero okay so we're gonna pass in section we're gonna always pass in section on every single one of these if you add in after the x equals one okay sorry i would show you what cassie was saying um so real quick nikki says uh or he basically asked if if that's what you made for the new york times i don't believe this was for the new york times just for funsies right yeah just for fun but yeah i mean that's this kind of thing that like the new york times or whatever you would would like do like doing that's kind of this is a great tool for kind of right storytelling data and events and things like that yeah um and then cassie kind of answered my sort of question where x percent is relative to the element with dom elements and svg but we're not sure about 3js objects so it might not be relative here um and yeah we're not sure cool all right awesome uh you were saying you you gave me a direction i didn't hear it so yeah so we're gonna another comma and then section so that's just gonna at the moment that's zero we're telling it to start at the zeros at the very beginning of this timeline cool um so let's um before we do any scrolling let's um go to html all right and then let's just hide all the other sections apart from the first two okay that one that one and then we're gonna comment out these all right now yep so fingers crossed when we animate now why is that not doing it i don't know do i need to pass the other uh does doesn't matter if i don't do x y z i don't feel like it should matter but um no no you don't need to do that okay that's fine are we getting that far are we even setting up the animation uh let's see we may got ahead of ourselves to unload let's follow it through uh no it's never it's never canceled logging here so do we do let's see do we get to the on the loading manager does that ever get complete loading manager setup animation is what that oh wait setup animation desktop animation right so let's go here uh loading manager let's do setup animation [Music] and then are we calling this desktop animation yeah we are here as long as yes that might be a thing we'll see um all right so how far are we getting we got a 401 for maybe huh that is that kind of pen thingy uh loading manager setup animation okay so this isn't working so we're setting up the animation where did i go setting up the animation but um this isn't being called this match media bit okay match media prefers reduced motion where's that gone uh keep scrolling out of it yeah so i might uh it's not picking up um the oh reduced i should have asked i was typing i was like yeah i should have asked all right let's see still nothing okay but that was one thing that's not it let's see if that's it here okay no so we we are now logging to that spot it's just not dsap not defined but that's a all caps we've got g set we'll capture you set target undefined not found so is the models dot oh right it's the scene or dot models that which does we add the group don't we when we do models oh group and we added the group so that which is the group i think uh item dot group dot add no it should be added onto this group thing right so we add because which should we add that yeah oh you're right no no you you you are correct because we add models sorry i'm getting conflated oh yeah so we're so down here we got models item name equals the group right that should be correct correct yeah um all right let me tell you so let's just constantly log it out and let's set up uh reduce just console models which let's see what we got there i don't know why that would be a problem oh is it position not positions i wasn't sure about that one i need to just speak up more let's see what we got yeah all right look at that we got it here it's coming nice now now it's now we've got it set up it should start happening pretty quick so should we go so should we go back to our setup animation um set up desktop whatever it was called setup desktop animation uh yeah where is that just have a little bit further down cool down down down so now we want to animate the bearing at the same time so that we just duplicate that cool bear bear negative minus one because we want it yeah cool and section stays the same because they're animating at the same uh position right because that's the position parameter with them to animate here they are this is so fun uh oh good tip cassie cassie says uh add markers true so you can see uh when it's starting because this is one giant timeline it's gonna be just one giant marker at the beginning and one giant marker at the end but that's about it they will be useful later on if we when we start doing the opening up the timelines or doing the uh stats when we start bringing in those stats cool right so now we need to do so we need to kind of know where they're going to go so we kind of need to start thinking about where this html stuff's going to live we might need to do a bit of html all right we need to plan ahead all right um all right uh so got section bear stats all right so then maybe you say no it's going to go all the way to the bottom right yeah now it's based on yeah so that's this is so now now they're not in line because we're not quite we're telling it one second it's going to be the entire thing so they're moving in slowly so that will fix itself once we start adding the other animations in okay so i think maybe if we're doing bear first maybe we want the witch to disappear again and the bed sort of get a bit closer maybe rotate that's a good car we're gonna we're gonna do the scene changing thing a bit later cool we'll just do that for now and a little lithium says she doesn't use gsap often so it's exciting to watch this and corey's here hey corey good to see you um oh uh oh and i think green green stock jd is i'm guessing jack unrelated don't use new before timeline it should just be const tl equals three step timeline okay nice that's good to know thank you to that then jack uh where did where did i put that new here we go yeah thank you very much i appreciate that tip needed news cool um so we're going to plan this out right so uh yeah i think maybe that that so that bear versus which maybe should just be like in the middle of the screen with a nice little font maybe that sounds good do we want to handle that first or do we want to do all the animation and then we can worry about css and stuff after i think that's going to make that sense right okay cool so let's move this bear then so let's go so so if we go back down to our timeline then okay do we've got both of them coming in and then we want the bear to kind of the witch disappear again we want the bear to sort of maybe rotate and come forward touch and maybe sit to the left so we've got room on the right for the content cool so let's do that so so press um so let's go down a couple so this is going to be the next section now so we want to increment section by one section two or something right so uh section plus equals one yep thank you will always start at position one rather than zero right so let's make let's get the witch back out again so the witch can go to five yeah was she at five yeah with switcher five okay cool let me just it comes in and then she should take for the leave again she goes awesome yeah um so we actually we kind of wanted to go we don't we don't want it to ease back out we don't need it to ease out so we can change the ease on this we had a default ease in and out but i think we should just have the ease in here but let's just change the ease there so and let's make that up like a power four or something so she starts off slowly but then we you know she disappeared pretty quick once that's just uh ease in no no you don't need the word in they don't need to ease anymore so you just stay in that's it cool so that she should start moving a bit slowly but then she'd just still get out of the way quite quickly see okay i mean because because it's compressed over like the timeline stretched a bit it's gonna be happening a bit slow and then the bear position i guess we probably just want it to move forward okay we can leave at mine minus one but then we want um z or yeah z let's do z and then have that move like two let's see what two looks like so we got let's see what we got nice and then should we have it move over or should the camera move or or or is this or is this fine and we can do the stats here yeah let's just leave it that for now we can play with it but the moment we're out of sync with the section so let's just get all the other sections done so we're in sync again awesome and and then so so let's do the next section so let's just copy the entire section plus one what have you and then we're going to say the witch is going to switch we're going to switch it basically so the witch is going to be a 1 and z2 and then we'll want him to ease he's in uh he's out this time so we wanted to start appearing quite quick okay so should i get rid of this or no just go just change that to out so so so but we don't want to easing in to stroke we just wanted to be moving and then just ease out so she slows down and say yeah exactly that so we want it to ease out but then once it's gone we don't need to slow down when it's off screen right uh let's see when it goes zero zero and then x is negative five minus yeah cool and then one more which is the um winner so maybe we'll bring them both back in just for now we're just slotting back in this in their start positions all right cool so x is one it's just gonna drop the e's for now let's go z zero just to reset it um and then get rid of that comma uh something's negative one cool so that should all now sync up so we should hopefully be in the title screen when they're together bear versus which and then and they'll animate to the new position for bear stats stats then we can keep going and then which stats and then we'll be back to the oh chat check it out that's so cool that's working awesome and you were right as soon as we got it set up it was like now we can really like once we have a hold of everything once we know where everything is um we're able to really just move it around and do it real quick that was fantastic yeah and this is why we do these sections this is why we say every animation for each section is one yeah and then we can just increment this section thing and just we're just we're just keeping it in line it's just a bit easier that way that's real cool awesome so now we get to finesse it out and add some yeah so we can either finesse it or we can do the slightly more complicated thing of having the scene kind of transition to the blueprint thing which is a bit of work but that's kind of like the core thing yeah let's do that should we do it yeah because because i think like from here i feel like i could figure out how to uh rotate the bear and show a specific spot and like move move them around i don't know if i could figure out how to do the blueprint thing without like digging through your code so i would love for us to do a bit of that so yes absolutely okay so there's a bit it'll be a bit of setup again just to get it working but so let me just explain how it's going to work so this i mean there's a number of ways you could do this and shaders probably is the best most performant way but what we're going to do is we're going to say um 3gs has this thing called webgl has this thing called scissors where you can kind of say i want this part of the screen to render and i want this part of the screen to render something else and you can kind of just split up the screen it's good for when you're doing vr and you need the screen to be split and you need to render two different things for that so we're going to use that okay and we're basically going to do we're going to change it slightly but we're going to do the same kind of things we did in airplanes but what we're going to do is we're going to we're going to on the render so on the tick we have this render where we say render the scene and this camera what we're going to do now is we're going to loop through an array of scenes and say render this scene with this camera and then render this other scene with this other camera underneath it got it so we have a simultaneous scenes that are animating the same way but one has the blueprint style and the other one has the normal style and all we kind of do is like when when we scroll into one section we do that scissor technique and we show the blueprint and then we bring back the normal as as we scroll past it yeah that's awesome that's right so let's get this bit set up so so so now we're going to have more than one scene so where we create the scene we're gonna have to create two two for now just to do the blueprint we might make another one if we want to do this kind of awesome kind of trophy thing at the end oh yeah that's so that's cool let's um let's go let's go back up the top okay all the time where we create the scene yeah okay so when we create the scene we need to make two scenes now so let's create so we create the we call we have to rename that scene in fact let's make an object it's called scenes okay and we're going to store it in here yeah and then we're going to have um i don't know should we call it like real life or something or real let's call it real and that's going to be a scene because we're going for realism so i think that that that's a good that's a good thing to realize yeah yeah we're all about realism here so real uh is that an object or is that it's just a new scene so that's just down there bottom there we have like a new scene just same thing again so we're just going to create a slightly different scene for them cool and then and then we'll have white oh i need that these three brackets yeah cool and then this is wireframe or just wire or just wire that might be easier yeah and then again a new scene i can type it cool cool so down the bottom there now so we're adding the fog we actually only want to add that to the real scene so now we're going now we should change this to scenes dot real background color uh scenes cool yeah and then and then we'll just move the background okay cool and then let's just change or not yet we're going to get crazy errors let's get rid of that it's going to break things because we're referencing later on but that's fine um so that's um let's create a new color because we want the blue background don't we for um a wireframe so let's just make a blue yeah yeah steel blue whatever is that hyphen or is it like that i think that's right yeah cool that's right let's try that um and then let's let's just assign that to the background of the other one so scenes seems like wire background equals so just duplicate that one scenes dot wire dot background equals new i probably should just type this order to copy this but we are here and it's too late um i saw lithia ask a question um so it will be up eventually on this page i now have like show pages uh for each episode still working on them if you've been on the show and your page has barely anything on it i just launched this before the show so like there's still not much around i'm working on them but uh but it'll it'll be up here if you want to find it specifically um but yeah cool uh so we got that background awesome should we just go through and continue to let's uh no let's leave it for a minute so let's um let's create another array as well so we've got scenes and we want to reference that as a model uh as an object so we can like we just done and say scene's not real but we also need views which will have a bit more information about how big that view needs to be so if we make a new um array we're at recreation that's fine probably yeah yeah views equals array cool and that's going to be an array of objects again so we're going to say so the way we're going to animate this is we're going to have um so the way it happens is the scissor you say where the width is um and the bottom i think i think it's like that we'll have a look in a minute but basically i want to say where the bottom position is in percentages and where the height is in percentages okay so when when something is full screen the bottom will be zero and the height will be one because that's full screen okay and as we animate through a section the bottom the top the the main the real life or anime and the height would be different but so they animate so height will animate to zero and the bottom will animate to one okay that's kind of how that would move about the screen and then the other one will do the same in fact we won't do it for real real we'll probably just just stay there for now just oh and we'll just have another one cover it and we'll just have it yeah it'll still be behind there and that just makes sense that's just fine right now yeah i mean it's not you know you ideally want to move one out and move one in and whatever but let's just go with that for now cool so let's so let's add um height and bottom to these the height will be um one for the main because to be the main one i guess so one bottom zero so it's okay actually let's make it height point five the fact both of them show at the same time for now awesome that's really smart cool and then that's how that's have the bottom point five two so this will be the top one okay let's see that said the height is in half and it's going to be halfway up got it and then um here we're going to need to define the scene as well so we'll just say scene equals scenes reel um right in so after bottom oh okay so so later on when we're running we know which scene we need equals scenes real got it okay and actually you know what we're gonna need a camera as well because you need a separate camera in that scene too that's our camera sorry sort of format that but it made it tougher uh okay so camera in here let's just have that as null for now we'll um we'll generate the cameras in a sec okay cool and let's do the same for the other one and just pretty much reverse or for the height and bottom height will be the same but the bottom will be zero so half height bits at the bottom and the scene is wire yeah and the camera is null awesome and then um so now when we create the cameras we just need to run through the views and create the cameras in there instead let's find the camera which might be right here cool let's just let's just surround that in a in a loop so cam it's a views dot for each got it and uh cassie says about how steve organizes his code by the way i find 3.js a bit wordy and confusing so this is really nice to see yeah i agree yeah it's it can it's one of those things and a lot of the examples you see in of 3gs is just like one giant thing which is kind of what we're doing here but i do like to separate the the scene stuff into like a class scene class and then i kind of have to look at that again i can just say here's the thing i want to add it to the scene just sort that out for me so i normally would split this out a little bit um but we got these comments so we're kind of we're going for a flow so it's hopefully quite easy to follow yeah um so that's right so now we're just rather than const camera we're just gonna say view dot camera equals snap perspective that's nice and then we're gonna do scene i guess we'll have to keep this inside the loop and then do scene dot add that view dot camera right we'll also the view dot scene dot add because the scene right whoa starting to get started and the the camera the camera target doesn't need to be a part of this loop we can have one target it's not really a part of the scene it's just a coordinate that we're saving so that can just that can just be a little one thing yeah and that should stay constant across both of them or else we're not going to get that that cool like reveal kind of feature if if if they're not lined up okay cool right i need to look up the bit now about the whole view so we need to fix all the bits where we're adding things to scene so you can't add the same object to two scenes at once okay so we need to clone our witch which sounds like a bad idea and we need to clone our bear cloning the witches sounds like a terrible idea together is just a disaster that's not oh man well we're going to try it and see what happens so when we do our load we're loading in these models oh actually let's fix this while we're here so while we're here the lights and the floor hold on what's up cassie thank you so much for those gifted subs that's super super kind really appreciate that that's just beyond kind of you thank you so much wow that was fantastic um yeah sorry you were saying steve uh so before we do that we need to all the the floor and the lights uh need to be added to the real scene rather than just a scene now so let's go and fix that while we're on while we're heading down okay so uh real got it re uh c views in nope cool that's so kind um and then the light too right because this other one's not gonna have any lights it's just the uh the materials will kind of take care of what what we can see um anything else view.seeing.ever get there yeah we're not going to need the floor or oh i already did that we've done that yeah my fault all right i think it's good cool and then here we go right so yeah it's now salute through views so now we need to just take everything we've got here apart from the request animation frame that needs to be outside this loop but everything else needs to be in a loop now um for overviews so views for each got it cool um and we'll also have to fix the resize as well because the resize is resizing one scene so let's um let's do that now before we forget so if we go back up to the on resize okay we need to loop over the camera there the same thing again views for each and then we'll just we'll just fix those both cameras at once got it let me just hit enter [Music] for each uh view cool parentheses there all right nice um and then view.camera that's right that's a really nice way to organize this i yeah i thought it was going to be a lot of uh i think this would be a lot tougher to fix this up this is really nice um yeah and then let's let's go down to the render and basically the same thing so we got the camera now so we want the we want the views camera to look at the time target and then we want to render so now there's something we need to do between this and let's set up the um set up the scissors so um we need to work out the height so basically we need to times size height by height that we want it to be um that makes sense so um so and then we also need to set so this is a pixel thing so we need to actually get the proper height from from the height of the of the viewport so this is coming in we need to do that right like the the height and bottom bit or like yeah yeah yeah so we need to turn height into what that percentage of the real height so so we need to create one so we need to let's create a new variable in the render um there inside the inside the loop because we'll need say ticker it reset inside check in the tick cool so there so let's go let uh or const um bottom bottom yep equals and it's gonna be the um the uh the size height so the so that's set when we resize that's going to be the height of the window times view that height or weight size so yeah the size height so we're taking the height of the viewport and we're timesing it by got it the view height okay does it make more sense in a bit i think all right so size height times view height okay and that's kind of that's where um our view bottom sorry so we're setting bottom so that's going to be where the positions itself at the bottom and we need to do the same for height so let high equals size height times view height and just uh for the chat size height we're getting from this on resize um it's just the container width and height well it's just the height cool so we're basically converting a percentage into pixels so that's the positional position on on on the screen and now so now we need to say instead of renderer we want you to render this this bit here not the whole thing so this is uh where you go renderer dot set viewport oh and then we want it to start capital or is it no no and so it's this is the top top left top right top left x y so it's going to be it's a brackets we need to pass in um that no no so yeah it's a function sorry call okay no okay uh so zero zero so we're gonna start at top left you say it's an array or zero zero um there are yeah it's that size you got it right there and then the next one as well is going to be the size width and size height so that's kind of the viewport that's the whole thing and after that we then say we want the scissor so the bit we're going to cut the bit we're going to that's it so that's it that's the end of that one cool a new line the renderer set scissor this is cool and then that's going to be zero so it's going to start on the x and the um the bottom so the the y is going to start where we've set bottom so it'll so this needs to be bottom and then we need the width so it's going to go to the the width of the screen so size whip because the scissor on the side it's always going to be full width but the top and bottom chain we could we totally could if you wanted it so like you know one side of the screen was like the witch's kind of room and the other side was the bear's forest you could totally render it like that oh that's really cool that's cool um let's let's go with um height so this is now just the height that's how tall it's going to be so that's how far down it's going to go and then is this view and then one thing we need to do one more thing we need to do is render a set scissor test true so that's going to be a function again that's just telling it to do the scissor you know why it's called um test but that's a that's a function as well so just passing through cool awesome i think we've got some errors i'm not entirely i think that's because we're still trying to add cameras these characters we need to do uh this needs to be inside the oh it is we just need to do dot cool all right and i think i think we're gonna have errors at the model loading as well because we're still trying to add the models to the main scene uh okay well i think here too so view that scene oh yeah of course camera awesome and then yeah down here we have more s this is looking good already though that's we're getting the half and half so we're rendering the two scenes yeah we're just not adding the models to a scene so we're going to add that to the top scene for now where we're hey when where's the model.c in that traverse child there you go okay and then let's create and so see how we've got models yeah and and then we add the group let's create a new object called clones and we'll do the same we'll create a clone in the clone object so up by doing something we'll do clones yeah so game time we're we're getting into kind of a more uh i'd say somewhat more advanced um feature or like sort of thing but but once you kind of understand like what we did is we just ran back through and now we're we're creating a camera twice and just putting it into each scene so we we've got two different scenes and we're going all right instead of create camera and add to scene we're going to create camera for this scene create camera for this scene but have it be the same settings and you'll see you'll see well it's because we want it to do this kind of an effect right this effects a little bit more advanced and so that's why these are actually two different scenes this scene has the real look and then this scene has the wireframe look and so um all so here's the the scissor effect in action right so it's it's it's going up and it's at the top now right so that's how that's working am i saying that right steve yeah that's right yeah it's actually slightly different on the airplanes one because it's doing the scissors but it's not rendering two different scenes it's rendering the same scene with different lay you have this thing in 3ds with layers you can actually tell things to turn off and on burstness layers i don't think that's as good as way i think this way is now better awesome for another reason so so i think this is this is a better way so this is good awesome so we need our clones right clones object cool and now we need to clone each one this is where either like you know we'll help break this because we've just turned a witch so yeah we say models clear clutter clone is it clones or clones i think you're writing clones look at that i item item.group.clone and that's a function so we want we need to we can't just add the group to that wait uh we want item.group.clone actually actually no no no no let's make the claim first so just up there just do cons clone equals group clone okay um where is that going here it's just above the line above so line you know you know just so that's it so let's just do clone equals items group clone and then we need to add that to one scene and we need to add that to our clones object so that so uncomment that and just passing clone that's the one and then we'll also add it to this the wire scene so seen wire add clone and so we should see the same thing in both ah yeah so that just doesn't have lights and that makes sense why is it not oh and that's why it's not showing we're animating we're still animating together okay so scenes have this cool little thing where you can say look this scene everything in it we're going to override the material so rather than going through this clone and so we want this material to be this want this material this right we're just going to go up to where we create the scene and we're just going to say scene i think it's scene material override let me check we need to create a new material as well while we're at it um yeah so override material it's called so let's make a new wireframe material so just before we start creating these scenes okay um let's create a new material and it's going to be um let's just call it wireframe material yeah and it's going to be a new mesh basic material because that doesn't react to lights we don't need lights to see that one cool uh material that's actually material as well that's it and then we're just going to pass in the color white there's an object there and color equals white core then also we want wireframe to be true ah nice cool uh now we need to say on that scene so on scenes wire we need to say uh override material and then just pass that one in just like here or yes scenes.wire and it's override material dot override material so it's actually it's not function that one cool and hopefully fingers crossed we'll have a [Music] that's wireframe and it'll overlap once you have the animation syncing up but it's already looking pretty awesome that's really cool we can sort that out really easy as well because gsap can animate arrays of objects rather than just single things cool shout outs again thank you for moderating that ben appreciate you um and super quick since i just interrupted um lithia says is the scissors thingy more more performant can you explain more why you decided to do it like this um that's a good question so i don't think it is it's like if you were talking about like doing this with shaders uh like that would definitely be more performance so if you like literally had every shader like you know react to a position and stuff like that um that would be bad i imagine uh this is more of a time thing like this is a quick way to do this and because we've only got a few models in here it shouldn't be a problem and you know this this is how you do like the the the vr kind of rendering two eyes so it's not un not performant it's just perhaps not the best way to do this but it's a it should be fine for this demo cool thanks for answering that um so let's go back to where we're setting up these animations we need to do one little thing all right but before we do so on the animation setup here we go let's create let's create um three things let's create um an object so um const cameras um in fact let's make it outside this function because we're going to need to um yeah let's just say um null for now because we can't make it anything right now and then let's have um in fact that has to be a let now because we're going to change it later there can't be a constant anymore trying to get over home will not be called all right let cool uh and then we need um witches and we need um bears and again that's the let because we'll change that later so what we're going to do we're going to turn these into arrays of cameras an array of witches an array of bears um so so in there now yeah so in there we're going to say cameras equals and then we'll say um let's make an object okay and then say positions so we're gonna we can animate positions together then so positions equals an array of uh views zero camera position that makes sense so views views views in their views yeah and then we're going to grab the first one so group view zero views oh okay got it sorry there you stand um and then camera position the camera dot position no no sorry there so as i said we're grabbing the camera out of that view okay okay camera okay and then we're grabbing the position out of the camera so dot position okay and then we're going to do the same for the other one too we're going to add the other one to that array so views one let's add that to the array two okay you could make this a a map as well if you wanted to if you just want to do views map no it's fine i was just trying to figure out i was trying to parse what was what was being said all good all right and then we'll do a similar kind of thing for uh witches so witches equals positions and we'll probably do rotation just because we want to animate that so um let's copy this and we won't grab it from the views anymore though so positions equals um and then we're going to add the models dot which position and this is going to be an array and then we're going to grab the other one the reason we're doing this is because gsap can animate in any number like an array of things but we're now going to say which is positioned and then just run the animation we've done before and it'll animate both of them at the same time okay so now we need clones.which stop position in there got it i'm starting to understand now and then for the bear we'll now we'll do the same thing for the bears right yeah and we might want to do rotations while we're here that makes sense and then let's copy the positions and add that to both of them too uh i mean the rotation oh why did it do that one ah because it was plural like that and actually you kind of you probably just want this to be rotation just on the one on the front yeah and same with positions just make it position just so we're cool we're saying which is position cool so now when we go which i have bears here it should be bear yeah now what we have to do to fix this animation is to go to the animations and change glitch whatever it is if we go down there have a look so we've got models which position now we need to just change models which to um witches which is that position just yeah so which is opposition and then that should that should animate both of them at the same time because it's animating an array and we're moving them both to that position uh bears those bears yeah go and do it on all of them so we have a few down there yeah the set isn't working well we haven't done we haven't added that to the um just above so just below this we go models which position so go back up again you go line that's it so we just need to change that and and then um that's the one that's not going to work so so um because that's an array we're just saying there's a regulation x because we can use um g sap set and do the same g step has rather than two g seven has a way of just just um she's changing values instantly uh or g which is that position dart set so gsap.set oh oh yeah yeah sorry thank you that's set and then which is last position and then it's going to be the object object cool that makes sense that's a tidy solution for that um and then bears and then minus five uh minus five cool and then we just need to fix those last few animations on the next scenes so it's gonna work on the first bit but it's not gonna work for the rest of it but it's already looking great like that's already super cool all right um yes yeah i just got to go through and do the same thing everywhere so which is which is i remember if i copied the comma i did not yeah so the whole time it's going to be animating both uh but we're not going to always show half and half like this we're only going to do it without certain yeah in a second yes such a cool effect awesome cool so hopefully now if we run through the page both of those are going to be animating in the same way awesome so now just we need to animate those positions so we'll just add that to the timeline so um in section i guess it's in section um two so if you scroll up a little bit yeah yeah where we bring one forward that's right so we're bringing one forward so we wanna say now timeline two and then we're going to animate um the uh hello let's see gonna be well we can animate both but actually we only need to animate once let's just do views one um and then and then we're just going to animate the bottom and the height that's it so bottom will now be um uh so we need to change it up to the top at the moment because the bottom will stay at zero actually won't it but we want the height to be one if we're going to leave the other one where it is so let's just go height equals 1. that and let's make the e's linear because it's really nasty it's not very nice when um the the ease doesn't match the scroll when you're doing an entire wipe it looks really off so let's just do linear that's it um and let's go and set let's just check that works it should it should yeah so let's um let's just start it at height zero and then we're good to go all right so let's set it up here or oh oh start it uh um where we set it where we create views where the heck do we do that view scenes views here we go we want that to be one and the bottom to be zero and that one so that's full of height and that has to be zero zero cool now hopefully once that refreshes we should as we scroll down to the other bit it should hopefully that's so cool that is so cool it is a little out of sync though it should be going up roughly where that red line is so where are we ah are we getting that wrong interesting yeah because it huh we're telling it to do it at the same time we move the bear but the bear's already there by the time it's going so we are we not adding section at the end of the day are not no we are not good call i forgot that bit um camera switches no is that where we are sections there we go without that it's adding it to the end makes sense there it's pretty much yeah i think the ease isn't right yeah something's off about it it's pretty darn close but yeah that looks like the ease to me yeah just fix that ease and i think that would be good is the is linear what we're looking for there is it just quote linear have i used in the past they've got uh yeah he's linear oh uh i think this is the typo i think linear none is none right yeah he's none that'll do yeah it's good enough isn't it yeah all right and then we could if we wanted to do like the other bit then we would just add that to the views and then we'd just so we could now quite quickly make another view that animates in because we've done the hard work now so adding another view was just a case of kind of just setting that up yeah let's let's uh all right i i don't know if we have time to do like a full um yeah i'm trying to think do we go for that last view i'm not sure if adding another one would be as uh informative because yes like i feel like now i can figure out how to add another view and how to add another material i was thinking like you could get like a matte cap that's gold right and just add that on and it would look really good you do exactly exactly that so you did the same thing you'd make a new material with the mat cap in it yeah and then and then you'd add that to that scene um like a huge library of matte cat png textures there's like a ton in here and we could just find like a cool gold looking one like this or something right and uh and slap that on and uh then we've got our trophy right you got your trophy witch or your trophy bear yeah um so instead of that do we want to just try to get um a little bit of text coming in um maybe for a stat i'm trying to think of like what would be the most useful thing because i think the one thing that i don't i don't have a great sense of how to do it would be positioning in relationship to like the ear uh if if i wanted to have like say some kind of like line here and like superior hearing written there i don't know if i would be able to figure out how to how to target that ear even if the ear is moving around okay it might take a little while but what we need to do is um how long we got uh we're kind of over time so yeah so i can explain how you yeah you would do it yeah maybe let's have a look i've got another project somewhere where i do it's one of those things i don't do it often enough to know off by heart so no worries give me a mo basically you need a array tracer so basically saying i need to know where this point is and then you kind of you kind of grab that and convert that to screen space and then you can come position it um let me have a look that's interesting yeah because i i always liked the way that you were able to kind of line this up whoa thank you i don't do that on here so on here i just it's just kind of if you were to shrink that window none of it lines up it's just kind of steve you're uninvited get out get off my no it's still it's still yeah i i never know i could determine enough it's good enough yeah exactly so it's one of those things where like and so if you want to do it properly i can we can kind of have a look i just no no that's totally fine i i wasn't sure if there was a like a special trick to targeting with dom elements specific things inside 3js and so tracing is the is the answer let me let me i think it's called ray tracing that's something slightly different i might say the wrong word um let me have a look yeah i'm thinking um what's what's the thing that like like um if you were to use ray casting so that's like if that's if you shoot like you know if if i'm making like a laser gun game and i want to see if if there's like a hit detection or something or i mean for this if i want to see if i'm clicking on the bear if i'm clicking on the bear's eye that's what i would use right for raycasting yeah and that's what lithia is saying for mouse over effects clicks on 3d stuff cool so you can use raycasting in a uh like like for absolute positioning or something like that that's super cool i i i i actually don't know i might be lying to you there let me just cool i think i think we've got some people in the chat who uh who seem to be a little bit more familiar with with this specific aspect um alithea is linking to the raycaster that's awesome used for mouse picking uh amongst other things awesome yeah because i'm familiar with it in in this context of like i need to detect clicks or if i want to have like the bear have a you know change color on hover then you would use the raycaster um but i never thought to use it um to you know position dom elements around an object that's really cool yeah i don't know i'm gonna have to i'm yeah it's going to be very much like that for like 20 minutes no worries yeah no i appreciate it chat anything else you want to ask before we uh before we we head out and uh thanks steve i mean i mean i've got a chat for another couple of minutes but i just want to make sure like those were those are my kind of questions where um you know i i was curious how to do how how to do this swipe basically and let's get rid of the um section so it looks a little bit cooler or sorry the um the outlines so it's not as like debugging kind of look cool yeah so i just i i love how easy this is and how so one thing we didn't do actually you know what let's do that super quick if you don't mind uh animate the camera just coming down from like a little bit up a little bit down right uh yeah that sounds good so yeah so that's on the first scene so that's the very first thing we need to do is set the camera up too high we can do that when we make it camera good call uh camera target no that's that's not it no that's right the target is actually what we want to animate because we want it to look up so we need a target to be up oh so that's a cool idea i was thinking and i don't know camera terms so i'm gonna say them wrong i was thinking a pan i know it's not a pan but a pan rather than like a tilt oh i see so you want to move it up but yeah i don't know i just didn't i just didn't have that in in mind i i like the idea of a tilt that's awesome uh and then we're only moving one thing so that's pretty cool uh so this is this is left and right so you want one up and down let's make that you probably don't have to go much actually you have to have to go up to two or three or something okay three and then camera target dot position yeah so look we yeah we can barely see anything here that's that's perfect uh okay so on the first scroll no where are we set up animation here we go so [Music] animation all right timeline man it got all weird all right here we go so here right that's right so tl.2 um camera target.position no because this is actually just a vector three so it doesn't have a position it's just animating that directly oh so dot x no camera target and then y is one one and then section yeah let's see how that works let's see what we got chat yeah look at that it yeah it's coming down a little bit let's make it a little more dramatic with uh four let's just make it like really let's just ruin it let's just ruin your hard work [Laughter] just let me just get my hands like grubby little fingers all over your beautiful work um scene views renderer camera here we go let's go four i just want to really feel it like come down yeah that's cool that's great right you know what you could do as well you what you could do is move the camera forward so it starts forward so as it's panning down it's moving backwards they kind of they kind of almost like appear behind you okay so with the camera forward attach camera for it uh at the start or or here yeah have the camera start rather than i think it's like five let's have it start at two or something okay um and then it's gonna move to five yeah right so camera starts okay wait it starts at starts that's a four so let's start it i started uh that's the y that's that's the y right that's the i started it um oh oh oh sorry so sorry no so we're looking at the camera target the actual camera itself starts here so five yes so five give me that one maybe let's start right near right real close like uncomfortably close and then we'll have to do this twice because it's it's each camera actually yeah we don't because we added that camera as oh yeah yeah yeah it's cool all right so cameras it's the last thing we're doing chad i promise um uh tl cameras dot position yep and that's z and that was five yep all right let's see what we got um aaron just banned one of the letters how am i gonna do that make them jump support game says that's awesome and geena good to see you um here we go so here we go let's see what we got uh let's make sure we can see this effect so we're scrolling okay something went horribly wrong what did i do what did i do this this animation camera again camera's not position this camera is not this camera's not a thing cameras it's animated or maybe it isn't positions that's why there you go all right here we go try it again trying again chat oh that's pretty cool that's not quite as dramatic as i was hoping no let's go forward a little bit chat we're so close we are so close it's gonna be weird actually because if we move it further forward it's kind of kind of be facing backwards if that makes sense it's gonna be like yeah yeah yeah just kind of looking at that point let's give it a go that's it's we we acknowledge that it's a mistake and we're going full speed ahead oh that's gonna look terrible yeah yeah yeah yeah let's try it i think it'll be right it still has like a nice like zoom it's it's a lot more dynamic than it was five minutes ago yeah i mean an ease would help there i think because we don't need it to ease in it's easing in still so it's taking a little while to get going so if we just were to change the east out it will probably get going a bit quicker let's try that all right um e so in out drop this or no no no that's that uh we're just on just on the cameras and alan the camera is cool so you're saying out out yeah and let's make it um power fours may be a bit much what do you want to do make it two two all right two it is okay all right let's see if it loaded i think it might have yeah hey wow i'm loving it i love it bear versus switch and then we look at bear stats the witch gets out of here bear stats are done which is back in and then uh you know we could do at this point um do you do do you want to finish off because it wouldn't be long finish off just bringing this back to real yeah let's do that all right do this scramble that is the true finish that is the true end of this project i promise chat i just want to keep playing with it so much fun um all right where is it so which is position barefoot this right here views one right grab that so we want that height to be zero but we also want the bottom to be one so we want it to get character head on up cool okay um and that will happen as we scroll towards this right it doesn't have to we want to worry about it yeah let's check it out what's the nice thing about this setup like it should that should that's all you needed to do to sort of do that next thing if it works he says that that's awesome that's so cool it's so cool and then that that scene could be the trophy scene where bear becomes you know that that full gold uh thing okay this one i mean you could actually not even need another view while the well the temp while the um well the the blueprint is in screen you could just switch them that's a good point could you do that with with green sock would that have to be a function that you that you like yeah so you could you could do one complete on that one but then it gets tricky when it reverses and stuff so you might you might not want to but okay yeah um i just dropped my little version of this in the chat but chat um the template that we started with that steve kindly uh provided for us gets you like off the ground because 3js has a whole lot of boilerplate a whole lot of setup for a lot of projects and steve uh has some great stuff in this template like if i open it up again um you'll see that it's got a lot of settings that you might not know how to kind of put in and just a a nice default to run with so that is um all in leave that's all on this this page and uh if you came in halfway through or if you had to dip in and out the video will be up on this page so bookmark this um and also the the market where we got the witch from and and other cool resources on there um i also will have to put your um twitter and stuff on this page steve i i should have thought of that i'm gonna do it i'm working on these pages as we speak um but yeah honestly uh we have a whole bunch of uh fun shows like this planned uh so this was today's uh on tuesday we've got the creator of slinkity ben holmes coming on so definitely be here for that on next thursday one week from now we've got liam eagan who i think might still be in the chat yeah he spoke like two minutes ago so if he if he's left uh i'm is uninvited if he's left in the last two minutes he's off no uh liam is a phenomenal creative developer i know steve can vouch for that too and he is going to come on and kind of teach us about shaders in this same kind of format where we're not exactly sure what we're doing but we know we want to learn about shaders and that kind of topic and it's going to be a blast um and yeah uh we got ben meyer's coming on to teach us 11t we're gonna learn about chakra ui we have ryan labar who is in chat earlier coming on uh astro we're checking out we have olivia who was in chat a bit ago uh coming on to teach us or or to build a cool space shader for component carousel a whole lot of stuff so uh make sure you are following here make sure you you you drop a follow because we've got a whole bunch of stuff planned i'm trying to book people constantly um lots of eleventy we we love to see it um but yeah so uh thank you so much steve let me actually plug real quick your uh uh hold on steve what's your website again uh it's dvg so it's ste.pg there it is um steve's site is just yes and andy bell's cube css we're gonna have andy on it i didn't mean to skimp at the end uh jamesquick with r0 and andy bell gonna learn some cube css uh i'm not gonna read that out loud uh arc cardinality but that's very kind of you um um he can read chat but uh yeah so steve you are fantastic i would love to have you on anytime this is always a blast um thank you again man i appreciate it uh it's been it's been a lot of fun yeah it's really worth very much for having me yeah and chat hang out we're gonna raid somebody great we're going to find them and we're going to raid them and it'll be a whole lot of fun we're going to keep this party going thank you again and uh yeah make sure you follow and make sure you are here on tuesday because we're going to have uh lots of fun next week so take care see you soon [Music] so [Music] [Music] [Music] so [Music] [Music] [Music] you

Channel: Alex Trost

Views: 14,550

Keywords: GreenSock, GSAP, ScrollTrigger, Three.js, Three JS, animation, javascript

Id: 1A0uFRjhro4

Length: 138min 50sec (8330 seconds)

Published: Tue Nov 23 2021