Motion Page Deep Dive - GSAP Animations, Scroll Trigger, and More!

good morning everybody how are you all doing hope we're alive and coming at you here this cold friday morning in my neck of the woods it's not cold for most of you probably but it's cold for me i know we got some folks here early in the chat we got chris how's it going john ushan and i think taylor is lurking around in there somewhere go ahead and say hi in the chat if you're here we're going to get warmed up just a little bit and let everybody get a couple of minutes to join in before we really get rolling here hope you guys are all doing well guys and gals so uh just to quickly touch on this so we can uh be 3 p.m nice 901 a.m here so um we're going to be covering motion page more today so we're going to try to create some animations and um got a few examples here we're going to just kind of keep it really casual and light today and we're going to see what we can come up with so i have no idea how this is going to go i've of course used motion page a decent bit but there's a lot of stuff i haven't explored like scroll trigger i haven't used really at all so there's going to be lots of stuff for us to cover here today and we got rados in the chat so david and rados are the two developers of motion page also the the team behind oxy ninja so i'm stoked to have them here and let's see how we're doing so far so connection says it's good 4pm in germany nice everybody hear me and see me loud and clear i'm assuming andre good morning kind of looking at the uh levels and stuff making sure all is well how are you guys doing hope everybody's doing well oh my gosh my chair is about to fall apart i don't know if you just heard that it almost snapped 847 in nepal wow that's crazy we have a worldwide audience as we typically do but especially today i'm stoked for this so hopefully you guys are fired up this is such a cool piece of software so i'm not sure if how many of you guys saw the uh episode yesterday the premiere we did but there was like something like 70 people watching it live and so it made me want to do a live stream on this we're going to dive into it more deeply and see how we can do thanks taylor started gofundme for a new chair yes please look at that there's luke even though it's late as hell over there in your neck of the woods i think what is it midnight in japan i'm glad to have you dude thanks so much uh andre uh not so much tired i have a disgusting eye thing going on which is why i have my glasses on today trying to get this um cover it up a little bit i know nobody asked about that but there it is that's why uh honestly i need a pro streamer chair tailor i need like the brand behind me but this some of the most of those are super uncomfortable sarah what's up uh so real quick i wanted to give a shout out love from pakistan awesome thank you studios sudayas hopefully i said that right i wanted to give a shout out if you look up here so divide us right here he not only became a member last episode but he also dropped a super chat right there and he was the very first person to ever uh super chat on the channel which is super awesome we also have luke reupping tobias uh taylor's not in there for some reason i don't know why but taylor's there sarah you're totally right tea bags 100 that's the best way it it is the only thing that makes it better except just time so totally uh yeah so we are a couple minutes in here we got quite a few people so let me uh just go ahead and give you a rundown of what we're doing so of course we are going to be using motion page to create some gsap animations today what exactly we're going to create i don't know essentially what i have is a few example websites and we're going to try to pull bits and pieces out of them we do need to build them in oxygen so there is going to be some setup time here in oxygen i'm going to definitely make this stream uh you know decent length so we cover some ground but we're going to build some stuff in oxygen and then we're also going to then move over into motion page and try to animate it so we're going to see how much we can cover there i like i said don't exactly know there are some things because of course i'm using a pre-release version of motion page that perhaps might not work or things that will come in later versions that aren't here yet so keep that in mind at the time of this stream motion page isn't officially out yet and we will kind of see what they what happens in that time martin welcome chris glad to have you robert thank you for becoming a supporter on the channel really appreciate that here we go david there we go that's that's what's supposed to happen right here that right there appreciate you very much david glad to have you too you're so welcome for the stream thanks you guys for making the badass software uh so let me go ahead and switch over here real quick so this is some of the examples that i have so taylor your idea about the poll is uh definitely cool so taylor sent me this example here and this one's neat because it has the text that comes in from the left and right and it also has that kind of highlight down here on the r client section as you can see so that's pretty cool then another one of these this one i thought was absolutely amazing i'm not sure how we're gonna pull this off but as i scroll it shows you more of their products i thought that was so neat that one's really cool uh i didn't look at this menu menu is kind of interesting some of these sites you know what's interesting with gsap is especially on their showcase um some of these sites almost become difficult to use because the animations are so intense and almost overly done that i think there's something to be said for um almost doing too many animations another one that i saw was the soda website so this is really similar to um this stuff i assume are these chips yeah yeah they are um this one here has like a cool scroll effect and the text kind of wraps over the top of the can so that one's kind of interesting but honestly i think this one's way cooler than the the can one then on this ballistic moon site they had this neat effect where they're like you know theme is this moon situation i don't actually even know what they are to be honest but uh it has this kind of cool effect where it continuously sort of you know reverberates out which i thought was pretty cool um this is something i'm not 100 sure on how we do probably a border that we use um motion page to then bend and kind of repeat over and over and then this one i didn't really look at but what does this what does this one actually do uh oh oh this one also had the same kind of effect over here where when you hover over things they kind of uh open up like that which is kind of neat also has page animations like this um and then the page oh not the blog why did it take me to a new tab then this where like the the page reload effect actually oxy ninja has one of these as well so the oxy ninja site of course has that kind of fade in effect for its menu options so if we clicked like uh maybe like help center you can see it's got that like page reload so um curious what you guys think about that martin says keep it simple yes absolutely i think what i want to start off with is this heading here and then this one the way they come in from the left and right edges and then the kind of highlight effect and then we'll go from there so we'll kind of see so taylor says would be cool to animate the plane let's see here is there a plane are you talking about the one in the header oh yeah yeah yeah i see that's neat okay well we got a bunch of stuff cued up here so let's just start with one and start making some progress here in motion page and then we'll kind of go from there so like i mentioned you do need to start off with your layouts in whatever builder you're going to be working with so at the time of recording um basically every popular wordpress page builder works there are a few exceptions i think divi and wp bakery are two that don't work but i imagine they're working on that we're of course going to be using oxygen so we're just going to create a page here and we'll call this bobcat because that's what the name of this page is my oxygen template doesn't have anything in it so i'm just going to edit this page directly and this page should be empty when we load it i actually forget which version of oxygen i'm using i'm curious because um the builder's slow down is super annoying for the face of a thousand singing angels i actually don't think it's a thousand i think it's maybe like one or two thousands a bit much but thanks mate really appreciate you one day i'll come give you a hug also taylor you know it dude okay so we'll see about the builder slow down like i mentioned in oxygen 381 maybe we'll switch to the beta version of um three nine beta whatever it is now but i wasn't sure i didn't want to introduce two pre-release softwares so that's why i'm using a stable version of oxygen right now so on bubka i'm just going to focus on this white section here i'm not going to worry about the stuff above it so we're essentially going to need two headings then we're going to need just a section here and then i'm assuming this will probably need to be a span so that we can style the border or the background color um separately than the rest of the text because if we did just text then it's going to end up styling this entire thing which of course we don't want is there a slider situation here oh it's below it okay so that's the testimonial slider all right so we're going to use hoverify real quick to look at some of these styles so that is actually not what i wanted interesting i guess i maybe will use inspect real quick to try to get to the heading itself i just want to know the color and the actual size and stuff or am i just going to guess i think that's what i'm going to do i don't feel like wasting a bunch of time trying to figure out the specifics here it's interesting i guess it's based on those classes oh well yeah it doesn't need to be coffee not fruit we'll just make a heading that's maybe 50 pixels with that green color and then we will make an oop not a column one thing that's super interesting is when i'm streaming the obs software makes it gives it like mouse acceleration and it's super annoying so let's go with 50 and then what does this say stand out and then grow strong so stand out i'm just going to duplicate this grow strong this one has kind of an aqua green i'm just going to guess what the color is something like that and it's going to be bigger than that let's go with like 72 or maybe even 80 pixels and then the other text we're just gonna take some text here and pop that in like i said our clients is probably going to have a span on it so that we can style it and then that needs to be bigger and bolder so we're going to bump this up maybe 36 sounds good font wait let's just go with like 700 and then our span style we're gonna leave exactly as is because before it pops in it is the same yeah until that scroll takes place so is that based on scroll yeah it is okay cool so this is gonna be easy to put together i'm just basically gonna center this stuff because is its final resting place centered yeah it looks like it is pretty much okay so i wonder if inspect or i wonder if inspect will give us any information about specifically what's happening here because i want to know roughly how it's oh the font size is actually based on viewport width that's interesting so it's a transform matrix i don't know what that means if i'm perfectly honest i forgot my head is on the right side today so if if there's a situation where you don't see what i'm looking at please scream at me and chat so i can see uh also i have to drop the obligatory if you're watching and you haven't yet dropped a like on the stream please do so it really does help me appreciate that a lot all right so um i am just going to translate why yeah it's just going to be translate why so i guess i'll just basically do it i'm not going to try to figure out exactly what's happening here so thanks luke you're the best my dude appreciate you so like i said we really don't need to do much in oxygen most of the the heavy lifting is going to come from motion page so let me make sure before i leave we don't want to change anything here the headings are a lot bigger and actually i will try to do what i just said about the font styles because it said it was viewport width but i can't remember what size that actually was um [Music] where is it font size is 12.5 vw interesting 12.5 yeah that's way bigger than it was and then oops 12.5 v w and then let's make our line height one on both of these and then uh that'll be fine yeah close enough dude 32.5 12.5 is close enough and then actually i'm going to make this section full width and then i'm going to remove the padding on the left and right sides i'm not 100 sure that that would make any difference but just in case that's what we're going to do so i did ask david and he said that you can have motion page and oxygen open and just use the refresh function in motion page to see the changes but we'll kind of see from here so there's that sweet intro animation to motion page and we're going to create a new timeline here so i'm going to click that create new and we'll just call this one bobca then we're going to switch our preview here to the bubka page with oh wait actually we're going to need more yeah i know font size big af i realized because we're going to use a scroll i actually need to get some other content in the page so we can scroll up and down um so let's go back into oxygen i didn't even think about that we shall see we shall see let's just stick a section up above this i'm gonna make it a slightly off-white let's actually go like no something like this let's go with the height of like 1500 pixels maybe and then we're gonna just duplicate it and stick it below it so we actually have some room to scroll and kind of see how this these things behave all right so if i refresh this now oh look at that there we go so i didn't even have to leave motion page i just clicked this little refresh button up here oh also i forgot to mention i turned on tool tips in the settings and then yesterday one thing that popped up in chat with somebody asked about overflow hidden you can actually go ahead and turn that on so if you have things that are animating off the left and right sides which we probably will have in this case you can control that there i don't know what conversation is going on in chat with luke and taylor but i'm gonna let those boys be okay so with our scroll trigger uh let's see so use the scroll trigger to animate the timeline as it scrolls in and out of view so perfect lock to scroll bar sync animation progress with the scroll bar um i don't 100 know if we need that just yet so animation starts when element enters viewport or is fully visible so in this case it actually does start before it's fully visible so it will be enter's viewport and then let's say animation ends when is fully visible we'll leave that as the defaults then scroller is based on viewport so we have the start at 85 percent which is down here you can see this green line and of course if i drag this you can change how that happens 85 i think is probably going to be pretty good for this and then our end is 15 so right at the top of the page essentially locked scroll bar i think is that animates based on your scrolling up or down yeah that probably is true let's leave it as one second we'll play with that we'll turn on lock to scroll bar and then we're going to go from there so now with our from we're going to choose this selector which is going to be our headline here and our translate let's see if i can get this right this time our translate y is going to be uh dude i i swear this is why i failed math class this is why i failed math class okay so our from and two so our from is going to be like 80 oh not 5080 good lord 80 i want it to be slightly off the page sarah i know it's awesome it's really really cool so again like i mentioned yesterday in the other video if you're essentially resetting the position of the element you don't actually have to change the two you can just leave that empty and just change the um uh you know from states the inverse is true also if you if it starts as from with just zero and you want it to go somewhere else you can leave from blank and go to two it would luke could come all the way across the pacific to my house okay so that works there and then we're just going to duplicate this that's that element right there is new can't delete last item i appreciate that says use start at zero percent and scrollers based on viewport as you animate section that it is on the beginning of the page i don't follow but hopefully that will make sense here in just a little bit so i'm going to change this selector here to this headline and then we need to change it from 80 to just negative 80. and then where is this one actually oh this one is left aligned oh well i'll just change that so the r client's background is going to be on that span and then it's just going to be a background that i assume translates in on the x-axis mike what's up dude glad to have you i saw you said you would watch it later i think how what time is it where you are it's super super late isn't it start zero means it starts animating when it enters your viewport not from the beginning of the page uh where but it's based on viewport already is it not so then does it need to change like do they need to invert essentially like this so the start would be down there and then the end is at i don't know maybe not 95 maybe like 90. yeah because the start i see okay yeah mike this this is awesome i want to make sure before i get too far in here and start making changes that i'm doing the correct thing because i thought i had it right where the start is going to be down at the bottom yeah that's what i thought david 100 on the start and zero on the end because the start is going to be at the bottom because that's the content you're going to come up to first yeah so it needs to be like this cool all right so with our headings they're going to move in like this i wonder if we can change an ease property here to make it a little bit nicer one thing i mentioned yesterday is there's a gsap ease visualizer tool so if you check this out you can kind of look at the different curves and you can sort of see what those look like so for us maybe sl no not slow let's go with power one that looks pretty good so power one there and then i'm gonna click this other headline and then power one there as well rin what's up dude glad to have you um so now if i click this animation it kind of slows down right at the end so that's pretty cool all right um the next one we want to animate is the our client section david says keep in mind that if it's above the fold you would add start more to the top of the page otherwise it would already be animated oh right okay so you would would you put in a negative value there or i guess a positive value of maybe 150 we can test that in a little bit because that would be interesting for animations at the top of the page like at the top of your homepage hero or something like that then we are going to add a new selector here this one is going to apply to our span and then this one is going to have a background color i don't actually know what background color i used um i want to make it match because it does match only if above the fold got it tobias what's up dude welcome to the potty um oh here we go i'm still in oxygen perfect i can just copy the hex color out of this sweet and why didn't it change does it need to be rgba or am i just blind is that the same color i don't think it is okay um let me move this over here taylor says could you set the background animation to a class and add it multiple places on the page yes totally sarah hey good to see you website oh yeah i kind of do honestly there we go and i don't want to set the oh actually should i set the background color on this span instead of trying to do it in motion page because you can set a background color i guess actually i would want to set the background color on this span and then let the plugin do the animation i believe right does it matter all right so i'll just refresh this so there's the colors so now with our span we should have okay david says here you would require to have a separate div absolute position there and animate its size without affecting the text got it so can you can a div go in a span i didn't think so so this actually how do they do it on this site oh they applied it to is wrapped hmm it's funny how these these look simple on the surface and yet they're not okay so take this off here and then right don't i need something in the content i i should have watched kevin's video on pseudo-selectors i actually didn't do that um with the background color what do you put in the content field sorry if you guys hear insane banging oxidant default adds an empty string um the insane banging outside i lived near a military base and they're always doing testing last night was really bad and today is also bad too so if it's like thundering that's why so display flex should have already been flex i think so the span position relative and i see span position relative and before position absolute top zero bottom zero and width of zero left zero as well okay okay so taylor says i build a website next to a military base never guess what happened next yeah they came and blew up my my house with their missiles or their machine guns is what they did okay uh the width on the before there we go okay do we need our clients in the before all right i want to make sure i'm doing this properly so i can obviously add the text into the before pseudo selector so is that the proper spot to do it chris i was about to check your idea on the um z index value but i don't i don't know that that's necessarily correct also for all of you guys that are here and welcome so many other people that are joining thank you guys for being here drop a like on the stream for me the index of one and then on the other one goes c index of two no didn't work tell me taylor oh got it that's what i thought luke good afternoon heinrich glad to have you okay negative one and then the before has our background color so now this on the front end still has our background so our from is going to be the width is it not let's um for some reason these didn't save let me refresh this did i somehow overwrite my changes okay so on our span no not rotation so our width is going to know that doesn't help me can i get to that selector yeah this thing is pretty crazy it's so clean and nice well this is clean too the scrubbing oh write it manually oh okay okay so what is my span here it is 864 so span hey i actually didn't even know you could type in here wow okay that's crazy uh am i an idiot is it not two oh it's it's not two i'm a dummy um span eight six four b four so my dimensions of width is zero did i do it wrong because this dimension width of zero that's what we set was 100 on the before of that span right do i need to set this to zero maybe that property isn't correct maybe it's not the width okay well that could totally be just an alpha your before and oxygen page is overriding it oh okay yeah that's kind of what it sounds like okay so what's another way that we could do this i happen to fight [Music] the problem is like you could do it with another div but then it's not gonna it's not gonna be like just remove 100 width okay i want to refresh this real quick wait from 0 to 100 right i wonder if i need to refresh the builder i want to save this real quick and then i want to refresh this just to make sure there's not some weird something something going on here oh wait wrong uh library oh look look look at this i actually didn't even notice this need to save an oxygen yeah right i'm a dummy check this out though look at the playhead as i scroll down you can see it moving look at that it works it works in the builder it's so cool it's so cool oh my gosh i love that that's amazing okay so we do have roughly the correct um you know situation going on here so we have our from and then maybe i need to set the dimensions on this to 100 maybe yeah maybe to david's point it just doesn't quite do sudos actually so instead of changing just that one span what if we just did the background color on the the whole thing before i go deleting it i wanted to make sure that there's not potentially one other mistake i'm making because i know somebody's gonna yell at me if there is but nonetheless what we were just working on is functional that's super cool i don't know why it stopped doing the scroll effect maybe once i started manipulating stuff then the scroll effect stopped working but what i want to do now is we will drop uh wait no undo oh my selector changed say you didn't save in oxygen after removing 100 save save there we go hmm switch on live mode right oh live oh [Music] cool okay i see that's sweet didn't realize that okay so what i want to do with this is instead of trying to work with that span i want to make the background position on this entire text move in like that or i mean the background color sorry so that actually you can see it's manipulating that now so we're going to change this dimension we don't want the width we're going to go with i'm going to delete the dimensions out of this and then we're going to go with oh if you start moving playhead manually live mode disables got it okay that makes sense so i still don't think we're going to be able to do the background unless we wrap this text with a div and that actually has the background so we're going to give that div the background right trying to think here yeah everybody's gonna throw stones at me um i thought the div has a background wouldn't we want all right i'm thinking out loud here let's go with layout i always get these backwards so no relative and then this one is going to become absolute no relative and this one is going to become absolute so then it's going to wrap to the edges of this container yeah thanks luke andre nice try okay um i'm gonna put this behind my text so i can still get to my text here so then on this div of 1664 if i changed that to a background color of is it still on my clipboard it is and then we're going to set that z index of negative one so then this might not work i'm thinking i'm thinking trying to come up with the creative solution here so then this text block we're going to change this selector to [Music] uh where'd it go maybe because i set it to negative one it can't pick it up okay uh we'll remove that and then this text i'm thinking i'm thinking bear with me y'all uh refresh i guess i'll just type it in what was my selector here 1664. ah i did some sort of shortcut i don't know what i did i pressed e maybe okay 1664. so now we're going to start with a from of dimension width of 0 and then a 2 dimension width of 100 percent look at that it's actually pretty sick it's not it's not like the example because it's not on the span but hopefully it's just a bug on the pseudo-selectors and that will get fixed that's really cool okay so then if we go here oh dude that's so awesome i love it man that's so cool it's so simple and yet so beautiful look at that look at it that's so cool okay so then what does it look like on mobile out of the box i didn't do anything in oxygen that is freaking dope okay so one thing i thought about was um the performance impact which i know is not going to be substantial but i was just curious how much code is actually output to achieve this sort of effect right here but damn isn't that cool that's so awesome well there's one layout um like i said a million times this is a pre-release alpha so maybe or actually i don't think this is alpha i think this is beta um hopefully the pseudo-selectors get fixed because that would and that would be so cool to be able to tie that into pseudo elements like we were trying to but nonetheless it still works and all this stuff is still um you know still functional andre says i guess there's going to be a lot of movement on upcoming auction sites yeah i think before you hopped in i was saying that there's a um like this thing that exists with gsap animations and like lots of these websites in the showcase they just get so crazy it's just like almost too much uh problem with z index is that text is above that and it covers the whole space we'll take a look at it got it yeah no worries i think it's still really cool how it is even if that was a limitation i don't think that's that big of a deal still super badass there's the page all right uh let's do a lighthouse test right now okay so inspect lighthouse that's that's confidence in your product right there david says let's just do it all right so generate let's see let's see what lighthouse has to say there's not really a whole lot on this page so i suspect it's not going to come back with anything negative by any stretch of the imagination look at that 96 94 100. what's it mad at us about render blocking resources css dash icon block library wordpress jquery not nothing to do with with motion page unused css dash icon we could fix that easily block library of course remain text google font yeah there's literally nothing no mention background doesn't have contrast that's not their fault seo document does not have meta description oh wow page is blocked from indexing yeah literally nothing cool like i said that's confidence in your product right there for those of you guys that don't already haven't already signed up for their release click the link in the description below and you'll see the the link to motion page so let's go ahead and keep rolling uh what i want to do now is let's take a look at some of these other examples let me make sure there's nothing else on this site that was particularly cool there's more of that span stuff so that could be something we look at in the future they use that a lot through their site so i assume you could tie that into a class in oxygen and then you only have to animate it once uh check code on the front end are you saying like in page source there's probably not that much i'm i'm not worried about it i'm confident there's not going to be any um any performance impact sarah says i've signed up six times because she wants to make sure i don't blame you anything else on this site it doesn't look like it they i think have used their animations really nicely so these effects are just used sparingly enough that i think it's cool there are simple things like we covered yesterday in the socials video where like those icons kind of popped in sequentially which is cool and that again can be done with a single class you apply it to one element and then it just replicates out so that one's cool so thanks for this one taylor he's awfully quiet over there though hmm where is where is mr taylor kind of starting to feel like he's not here anymore i want to say thank you to every single one of you guys watching so far this is super super cool i'm so stoked on this software i wanted to mention if you're bummed on uh a bunch of these gsat videos coming you can go ahead and unsubscribe now because there's gonna be a lot more company coming so there's that yeah what's the difference between british tea and tea in general is there a difference okay let's work on this chip situation here i think this one's extremely cool so i want to get this one working so i want to figure out roughly how they've structured this there's no way taylor you said i don't what you told me recently i thought you what i don't i don't know about all that all right so how do they have this set up here this carousel so they have what's all this is it just images with an a-link yeah okay so it transforms as you scroll so this container that it's in its width is 225 vw time to develop the flavor when we ship it from 11th world yeah totally luke isn't the japanese tea situation pretty good i'm i'm stoked to try it i had my trip booked for november which obviously didn't happen because of covet but hoping to get there next year so we have a div width of 225 its height is 100 doesn't look like there's anything else tricky going on here and then what is these so we have opacity of one is it a it's okay so it's width of 25 vw david said this one would need pin which is not there yet but you can do it similarly using fixed position what is pin is that a gsat thing gsap pin so the pin element i don't know what pin means hmm well okay so maybe we can do like a side scroll situation like that japanese tea is grams yeah there are a bunch of brits here luke was here uh the other or well chris i meant to say uh who else did we have bradbury and then somebody else i think obviously taylor uh so because it has that kind of pinwheel effect on this site is that what you're talking about david that's the pinwheel function oh we have a pin ready but not fully tested okay so it's essentially like an anchor if you pin paper to a board and spin it around got it okay but if i did fix position couldn't we get like a side scroll effect rather than the pin the pen is dope but i won't worry about that for right now we would not necessarily have to worry about the translate because that's looks like what's happening is it's like translating in an arc off the page i guess what i'll do is go ahead and good example of gsap and pinning and other stuff codepen hopefully this isn't a sketchy link yeah that is really cool very neat okay well pen is coming so what we're going to try to do is just recreate this but i just want to do like a side scroll because it's just like this soda animation that i showed you guys earlier it's the same idea and i'm actually curious how they did it as well let's see um so div can wrapper can group where is it position is absolute flex direction is row left calc is a hundred minus five v w this this is super annoying they have like this stupid like timeout effect i hate that okay yeah okay so they're basically using the left position on its wrapper to push it slightly off the page and then as you scroll then it starts to come back in so if i yeah so they're just translating it back onto the page as you scroll and then once you get far enough then it goes down okay let's just try to recreate that so let me go back out of oxygen here i'm going to create actually i think i have a page for soda cans yeah i do i'm down david if you want to send me the the untested version oh this example also uses pen oh okay well that's kind of a bummer i didn't realize that this one says why why would you do that why would you time somebody out of your page what if they're reading that's so annoying holy crap that looks absolutely terrible this is oh my gosh dude okay so this is going to be pretty big and then i'm going to make its width like 50 or something i don't actually know what it was doesn't matter so this example david without pin is this just not possible uh there is no public beta right now it's going to be released relatively soon i don't actually know when that is though all right so i'll just create a div um another example what it was absolute was it not i don't think it was flex um can wrapper can group it would be possible with fixed workaround but i'm sure if they use gsap in your example it's pin oh okay yeah i don't actually know it was on the gsap showcase site so i assume it is he shy to call says i'll be the first one to buy you're gonna be hard-pressed to be the first one to buy there's so many people that want this plugin it's insane it's absolutely insane uh for those of you guys that haven't dropped a like on the stream please do thank you and subscribe if you haven't already uh let's see here i wanted to give a shout out to all the recent members i think we're at like something insane i forget how many members we're at now let me let me look let me look i want to give you guys a shout out all right let's see here we got 14 members let's go yeah taylor drop that fire emoji in the chat um so robert luke devitus luke again pawan taylor john tobias jason or uh john actually jay berrios john right joshua sorry kyle ceto daniel heinrich and evan thank you guys bird brain hello we do have a worldwide audience today 34.99 for 12 tennies oh yeah that's that's a lot yeah luke again luke's got the double sub that's some dedication right there dude you rock all right so this was positioned absolute and then it just uses transform hey welcome we seriously do have a worldwide audience we're on like almost every continent i believe we had somebody well actually i guess the guy from nigeria was yesterday let's see if we can make this work so i will just use horizontal i'm going to go with another div we're just going to call this can um we're going to pop in an image they do some sort of photoshop trickery because they have like a can and then they overlay the image on top of it i'm actually not going to worry about that i'm just going to stick an image in here and then let's go with just a margin right of like 15 and do this a little hacky and then let's change these cans so it says where is your premise slug merch actually there is only there's only three people in the entire let's see three people in the entire world that have premise lug merch there's myself taylor and then kyle van duzen from the admin bar but if people were interested i could i could come up with more i just didn't think people would want to buy it i was like just didn't think that i wanted to make cool stuff i haven't made cool stuff i'm going to get wren to help me design some stuff that looks really good okay um yellow i'm gonna do a couple more so we have some stuff that kind of goes off the page here and uh image maybe i should have set it as a background color okay lastly blue alright so let's see here why is this one so much bigger that one just decided to be bigger for some reason i guess that's okay so we'll change our section width here to full width we're gonna change this div uh this one was called like can wrapper or something like that we'll add a class just in case give us some flexibility in case we need it um let's see so then our can wrapper div was can group its left was calc 100 minus 5vw so that's an interesting one so size and spacing uh that would be left absolute left and then change that to none and i'm assuming we need a height is that why it just disappeared and all of our [Music] stuff just went away so visibility overflow is visible right did i do that wrong let's see position is absolute flex direction is row what else width 100 oop width 100 there we go okay perfect why is that one so much bigger it just feels entitled for some reason yeah i'm lost okay so i want to make these all the same size but homeboy here decided he wants to be bigger i don't want stretch i guess i'm just going to delete that one because he just wants to cause problems maybe they're different sizes or something this one's slightly different so maybe i'll delete this one too because otherwise they're all the same height which makes it nice and pretty and then i don't think i need 100 height on this do i no i don't okay so we're going to leave that as is i'm going to add in another section uh good question sarah i'll check that in just a second i'm gonna change this one to 1500 pixels and we're going to do the same thing just a slightly off-white background color to give us some scrolling action there oh yes we need the man the myth the legend gordon please do this area totally is the easy way just delete it delete it until it's not there anymore so if we go on the front end this should look super jacked up yeah it does okay but what we can do is change that in the settings so the overflow is hidden um robin you did miss a little bit but there's going to be a replay of the stream as soon as this is over and i am recording this too i might chop this up into a smaller video possibly i don't know what i'm gonna do just yet um let's see what else do we need to do so on their element here is there anything else so there can wrapper flex grow one flex base is 20 and then there's some margin i guess i'll add margin to the right of my wrapper just in case i'm not sure what they did there to knead that just some extra spacing off to the end but it's overflowing so it doesn't actually make any difference okay all right i just want to see if we can make this scroll now so i don't actually know that this is going to work because this is kind of hacky and we don't have pin yet in motion page but we will see in a minute excuse me okay so i'm gonna save this leave this open because of course we can still uh have oxygen open while we're in motion page and for those of you watching this after the fact i already shared that you can use this in other page builders as well we're just going to create a new timeline we're going to call this one sodas and then we're going to switch to the soda cans page so then our from wait does it cover up the heading here on the real site as you scroll it does okay so it keeps going all the way down so in motion page we're gonna have a scroll trigger uh lock to scroll bar this is what david was talking about when it's above the fold so uh he was saying the start would be like a hundred and fifty percent right like a higher value gordon what's up good to see you thanks for joining and then our end is going to be basically right here at that section because the animation actually stops and like it still kind of continues but it before you actually reach the end of it it it starts bringing you down the page so if i move my mouse up above these it still keeps me scrolling there okay i just wanted to kind of check how that works yeah gordon that is really cool there must be there must be two different things going on here because i shared this earlier what they did was essentially have the um this the can itself is um just like a mock-up and then these images are overlaid on top of it which is pretty cool so there's actually a lot going on here which is pretty neat but with our from we're going to grab i don't know if it's going to be the can or the can wrapper i think it's going to be the can wrapper is that what i called this yeah we can use the class there's not really any advantage to us using the class as far as i'm aware let's just do it though to prove that you can so the translate is going to stay there right let me scroll back and see kind of how they're doing this so it's translating yep yep yep yep okay so that's basically all it's doing there if you refresh the builder you can click on update button and you can use the pin after that oh uh okay so refresh here we go let's let's do this some live updates from the dev team [Music] this is why you guys are gonna get paid the big bucks david can't write messages oh no tell them to refresh that's sick okay so oh i didn't save my timeline whoopsie uh soda soda cans and then home page soda cans okay so how does pen work transform origin i haven't looked at that oh scroll trigger whoops wrong tab um pin element pin selector so which one enables selector scan which which element do i actually want to pin is it my my section like the main wrapper add space for pin element there's a couple of options here that um i'm not familiar with i haven't seen this until this very second so hopefully somebody that knows what pin is can chime in rados or david would be awesome i don't know what pin selector we want so it's the parent element of my wrapper here so is it 749 is that what my div here oh no i'm assuming the the parent element the wrapper of all the those cans so 6.49 i am back welcome back glad to have you add space for pinned element we'll leave that off pin repair don't know what that means uh um not quite sure i follow your question gordon but this does it for you so you can use it on any page builder it can be elementor oxygen um beaver tons of them there's quite a few that work right now right out of the box let's see now add your first inner selector as animation so then gonna be 849 right and then translate here we go nope why i'll get it one day oh wait our from is going to be just the default and then two 15. wait what so it's not y negative 15. so am i moving left so it's going to be yeah i definitely appreciate the fact that you guys haven't tested it if it's a plug-in with its own ui you don't need a builder right like it would work with gutenberg or even a plane wrote oh move start positions oh yeah i forgot to do that i had it at like 125 before let's see so maybe i have the wrong selector here and then also something happened to my layout with this thing so when i added this hey amanda welcome to the potty pin just adds fixed on that so it's normal behavior oh okay so then don't i need to stagger to get the animation to continue alright so now enable live and scroll and then do i want to make this longer oops live no i guess i don't want that one to be three seconds because then it's going to make that translate animation three seconds you should just need to add animate from right to left on the parent can wrapper oh okay so am i just using the wrong selector here hmm oh wait negative 15 is that correct [Music] i feel like it's so close i broke it okay so they're down at the bottom of the page for some reason uh pedro welcome i don't know what i did negative 15 translate x because that's just our left and right values [Music] where did it go why did i how did i break it i don't know what i did i just don't know why i pushed it all the way to the bottom and i know you guys said this is untested so perhaps there's something else that's this uh broken here i broke it i kind of want to just restart this because i feel like i kind of feel like there's something going on here i'd like to just redo this so i got that so i'm going to come back here so i'm going to create this new timeline we'll just call this soda cans new because we change so many things that i want to really like take it from the top so scroll trigger let's change this to a half second delay so we're going to change to pinned element our pin selector is going to be the parent container which we called can wrapper so we'll use that dot can wrapper then can you try to change start to 20 and then our end is going to be something down here like maybe 85 okay so then with our from we don't need to change anything and r2 the selector is going to be which one am i moving the entire container which means that i can't use that as my pinned element right because if i'm using the container that must be why in their example they have two different divs oliver welcome glad to have you let's see here how long have we been going uh an hour and fifteen cool so does it need one more div wrapping it i wanted to look real quick at their setup the selector of the can should work okay so then what did i call this one so just can yeah you guys did update it extremely fast so doc can our translate is going to be uh let's see negative 15. okay so there it is moving properly so then i want a stagger right 0.5 and then because we have a bunch of them we need to make this longer don't we oh wait so maybe the the translate needs to be much larger oops oh yeah true good call luke okay so then do i need to do some negative x value of something crazy like negative 500 to get it to push all the way over [Music] we're on to something here okay so they keep going off the page on this animation it only shows a couple of them at a time percentages are calculated of the box size so 100 is its width thanks bradberry appreciate you hanging out all this time have a good evening luke is that a good ooh for a bad oof all right so animation saved let's go ahead and refresh oh maybe i'm doing this wrong i set this on the can of 2 to negative 750 maybe our scroll um positions are wrong good oof yeah is there a scroller in the wrong position let's see here oh it's interesting you can actually kind of see it changing based on where you're putting your scroller it's going to give me a seizure though i actually don't know where this is supposed to be quite honestly there's a lot there's a lot going on here okay so it is working sarah's uh with this being above the fold instance yeah i think so because on this example site it is right at the top of their home page so when when you're scrolling as you can see the cans kind of go by which is what we're like vaguely close to i just can't figure out why it's now pushed all the way to the left before i start scrolling so i don't know exactly what i did wrong i think i feel like the problem is something to do with one of these options up here maybe the scrollers or the scroll bar oh your in scroller needs to go more negative like negative 50 or something okay we were on the same page there oh yes dude let's go obviously this isn't quite right because this stuff doesn't stay so maybe this section needs to be our pin selector and not the wrapper of the cans but that is almost what we want so let me go back here so our translate of negative 750 i don't think is quite right so oh wow that's really bunching up maybe maybe actually i'll just leave that alone for now i'm going to go with 500 percent i want to change the pin selector from our can wrapper to whatever this section id is called so section 149 um so we saved that we're gonna save oxygen and now yes let's go so the scroller um there's something slightly off but you can you can see i can see the first can and then it starts to move in so this is not quite the same as the soda can animation but this is like the bones of it to start achieving what you're actually after so then i guess i would need to make my let's see how would i do this i'm trying to think about how we get the cans to keep moving across the page yeah david thank you for your help that's awesome so when it first starts you have one ever so slightly visible then they start to go off the page they keep going off the page and once you start to get towards the end then right there is where it begins to scroll down could the default position of the can wrapper be in the middle and then set start to a hundred percent to negative one hundred percent david i think that start at 100 just pushes the pin container below the screen i feel like it's super close so so you can do pixels but percentage what if we went like negative 1000 instead of negative 750 that one pushes this one really far over and then it goes off the screen oh yeah so we can't do that i just just for the interest of like the way my brain works i want to know what happens when it's at zero okay so nothing happens when it goes to zero i keep forgetting i can look at this in the timeline here too taylor says in oxygen put the can wrapper in the centered on the screen so am i gonna be taking off what i did earlier with this calc stuff taylor you want me to center this um number four full screen okay cool thanks okay so then taylor do you want me to horizontal align this so they go over top of each other or just leave this as is i know there's a bit of a lag that's why i'm waiting patiently waiting somebody play the jeopardy music then animating x from 100 to negative 100 okay and i'm not doing it on the can correct i'm doing it on the can wrapper so translate x from from translate is x 100 percent and then two ah there we go yep totally that's it and then do we actually still need the stagger i don't think we do because it's on that sweet nice okay so for some reason it jumps one click of the scroll wheel boom brings it right there why would that be uh i feel like it's something to do with this position right here maybe if this is not horizontal i don't think that's gonna make any difference yeah it still jumps to the far left edge uh let me refresh this preview real quick so the start it works on the builder makes me wonder if it's something front end oh wait when i turn on live [Music] i feel so close i kind of like yeah i don't know why it does that it didn't do that before what if we what if we give this div just r i wonder if we give this div like a bunch of maybe left margin hmm no that's not going to help what about if we did it on the heading just to test well no it's because our container i guess did i set the section to full width i did is it overflow do i want overflow visible on this maybe yeah one one click makes it just jump like that it's really interesting let's go layout is your section set to relative and can wrapper absolute i had turned off uh i had turned off that luke i am interested andre to see like you said turning absolute back on okay so absolute works that's it still not quite perfect actually awesome so our container down there starts moving up a bit early i think these cans are a lot bigger in the mock-up than they are in our demo here which is part of that right there but we can actually fix that pretty easily by giving these maybe a width of like what would it be 250 yeah it is still jumping you're right are they already 250 oh the width's not doing anything start position should be on zero percent if animation is in heroes section ah so start of zero oh is that 11 or value close to zero okay oh wait why did it now it's at the top of the page what did i do to bork this thing oh i guess it's me messing with these widths right it doesn't like me doing that is that the problem no it was actually interestingly when i changed oh let's see make sure to have start position above the element otherwise when you start scrolling it jumps okay so the start is above the elements remove left wait say what it starts from 100 oh start position should be zero is that what you mean i want to make sure before i go click in more stuff i probably i'm sitting here thinking there's a bunch of different variables we're changing here i wanted to see kind of what we're looking at before we uh go making a bunch of changes i think you do not need that calculated value for left on the can wrapper yeah that's kind of what it sounds like okay so then now we remove that so it's we need to change this back to what was it 100 oh we made it worse that calc does seem like it is helping uh what if it's like 85 viewport width instead of calc is that going to work the scrollers start coming up too soon or maybe just remove from properties completely oh yeah yeah you might be onto something here david and then taylor says does in need to be bigger like 200. says i really have to get my hands on this thing i know the thing is it's really really fun to play with x 100 starts it from the edge of the screen yeah that is better taylor when it's at negative 200 the thing is though matching this example like i said you still see the cans when it starts scrolling so i guess it wouldn't quite be 200 it would be maybe something less than that like negative 150 possibly it kind of seems like it works better with no x there no x value okay that's essentially there it is there it is right there you can see it in the builder um it starts scrolling right before so i guess would i change my scroller to based on viewport like negative value just ever so slightly oh no positive value like 10 percent scroll bar in negative 100 i i feel like trying to fix it to where yeah there we go see it's getting better when it was at like whatever it was 12 percent i don't want it i don't want the page to jump down and then they can start moving i want it to do that which seems like it's almost working so scroll bar in negative 100 taylor ah it's so close it seems like it got worse i want to see it real quick on the front end there it is yo let's go that's it that's totally it that's exactly how i wanted it to obviously i don't want it to overlap this next section so there's something else i need to change there but look at that it's so sick sorry that was super loud i apologize in advance for all you headphones users let's do it that was that's sick i'm excited if you can't tell that's really really dope man that is just so awesome that's awesome dude what a dope piece of software this is absolutely amazing and it's so simple obviously this is just a really rudimentary layout but it's just amazing nick says a friend of mine dads worked on a bass testing gps targeting back in the day that would sometimes get bored at night and put in the coordinates of their trailers uh i don't know what you're what you're uh talking about i can't wait to start guessing all the numbers yeah see luke that's the thing is this is the kind of testing that i would be doing in um you know on my own time uh basically just trying to figure this out not on stream and then i would make a more polished video that's why i think the streams are so cool because it's just such a community effort everybody here the only thing that i want to figure out is why this starts overlapping i guess it's the end scroll right it would be this end so like negative 150 seems like the builder deviates ever so slightly from the front end but i'm sure they'll they'll um fix that because that everything else seems to work like nearly perfectly huh what is it why does it overlap like that oh yeah chris totally you're 100 right what's the overlap there for i wonder andre not today mate so in their case the next section is white so [Music] i wonder if i put a heading in here and there's some content in it does it make any difference oh yeah yeah the can wrapper is absolute is it white luke where did it go can group uh background is white yeah so it ends below the text gotcha yeah well i mean it's close enough i'm really happy with that so i'll just for the sake of this example add background color of white to that and then their next section is white anyway so they're kind of cheating but we could figure it out i think we're moving absolutely and just using from 100 should work i mean that's just that's just awesome i'll test it for you taylor i'm going to save real quick so if we need to i can refresh it or come back to this actually i'm going to refresh oxygen real quick so we have our history pane just in the root so if we make a mistake we can just come back to it i do want to test it because we're so close to it being like nearly a functional layout that i honestly i do want to get this to work properly so you said removing absolute and just using from 100 should work what's up elijah i'll show you in just a second what we uh have been working on we now have done two different layouts so i'll show you here in just a second see if we can get this to work apparently absolute is needed taylor i did use 85 vw um in our left position so is are the sections relative by default would that make it so it doesn't overflow let's see i don't think that's actually gonna make any difference oh of course it's gonna take forever to refresh now it's almost there okay so elijah this is what we made basically like there's this website here that has these like soda cans and this animation that scrolls across and obviously it doesn't look exactly the same but we essentially recreated the same thing here and there's we're i was just trying to fix this overflow issue but our container is absolute so i was just trying to see united soda cans are super happy tesla's super happy from yesterday uh who else did we showcase uh real quick for those of you that have joined the stream late the other thing that we did let me get back over here was we created this page so we did just a simple little animation where um these text elements move in from different sides and this background color kind of scrolls in as you can see so if we move our thing up and down there we go so those are the two things we've been working on so far there was one other thing i wanted to do which was this other example i really liked this pulsing kind of hover effect and obviously it's very much on brand for this company because they're whatever ballistic moon no idea what that is but has this kind of pulsing effect which i thought was really sick chris dude thank you i don't have a tesla referral code but maybe i need to also i imagine there's some of you guys that are new please drop a like on the stream while you're still here we are at how long have we been doing this an hour and a half what are we at now hour and 40. uh so what i'm going to do real quick is since we pretty much have this soda can thing dialed in i'm just going to take a quick break and then we'll come back david says that was the purest beta test of pin ever thanks jonathan you're welcome dude i was you guys made a beautiful piece of software and everybody's stoked to check it out so i'm happy to put it through its paces this is really cool also it's worth mentioning for those of you guys that are just joining this pin uh scroll trigger that we're working on we're using a scroll trigger animation and um pinned elements is what we just did this is actually a beta this wasn't even in the version that i had they gave it to me live here on the stream so really really awesome shout out to them we're gonna take just a quick break uh maybe like let's see like a couple minutes two or three minutes and we're gonna work on maybe one more thing and then we'll go from there uh i'm sure many of you guys have work to do but i just thank you so much for joining the stream and it's not done yet so stick around elijah says jonathan provides great opportunities to see how the thing you labored over from once immediately breaks when a real user touches it super funny happy to be of service to you elijah all right for real i'll be back in like two minutes let me mute my mic real quick just in case any treachery takes place are you guys behaving yourself what's been going on here oh nick okay gotcha uh i actually did mute it i didn't i didn't press the button there is a mute button right here um blanket over the cam yeah i should have done that probably uh webflow mudflow thought of something on my computer i freaked out oh i didn't i didn't oh i oh i unplugged i had my phone plugged in i unplugged that i see what you mean now okay oh let's see let me make sure the world is not blowing up over here uh-oh elijah posted in the facebook group oh snap oh no rc2 no wonder why he wasn't here at the start of the stream somebody says it's still slow as hell yeah i bet it is i love people's support what does rc2 do so uh correct uh structure pen drag and drop a firefox you know to do rc2 let's go i know luke the dark mode was killing me the other day i don't know why i turned it off here's my secret behind the scenes facebook hey look it's david okay so uh what i wanted to do now is let's see according to my analytics we just spiked from 35 to 62 viewers and then it dropped back down to 50. i mean i'm 34. and then youtube is screaming at me about some sort of bitrate connection even though it says perfect connection i don't know what that's all about all right um let's see what else did i have so we could actually we could try this another time i think since we ended up doing the soda cans i kind of forgot about this page but this one is dope too um maybe i'll do this as a like a regular video like a more polished tutorial video i'll figure out how to do it instead of us fumbling around for a while we already vaguely did that with the soda cans anyway i wanted to look at some of these other options and see this one's kind of crazy looking this one kind of hurts my brain but these scrollers are pretty cool so this one this is like one click of the scroll wheel and it takes you up and down is that pin as well i guess it is because it kind of keeps you on the same page uh this one it's really not that interesting because it does essentially the same thing the ballistic moon does is this an oxygen builder only plug-in no it works for pretty much every wordpress page builder out there including gutenberg so you can do a lot of cool stuff with this uh if you haven't already drop a like on the stream for me please that would be awesome and shout out to all of our members why not like 14 members i called you guys out earlier thank you so much for that um that is slider plus 3j oh okay so not something we're gonna do this in this video okay uh that was something i was gonna look up what was i gonna do if you have an example of something you um yeah i'll get you i'll get you a hat luke i can do that i want to try to work with this so my original thought with this was that it would be a border and then the border would repeat and the from well uh hmm how would this work because with your from and two it almost needs like zero to a hundred and then back to zero for the opacity is that one actually possible also i asked david about this uh earlier today but where you scroll up and down like this like one click of the scroll wheel takes you to the next section of the page i'm pretty stoked for that because the tesla site also has that which i of course didn't do in the video because it just wasn't possible with the plug-in but that is something they're looking into which is pretty sweet how would you do this continuous pulse effect like this it's really really cool um oh would you just have it well theirs starts from like a low opacity ramps up and then back down so maybe there's a way you can do that that wouldn't be in this plug-in but you could have it ramped from 100 opacity and down how do you get that movement out of it the continuous movement maybe this one isn't a good example let's go through this showcase a little bit more and take a peek at some of these other things i'm not really feeling that example it's really not that like practical quite honestly a ge website huh oh yeah kind of this pulsing effect so what are they doing is this just css oh with some keyframes okay more css than gsap yeah that's kind of kind of what it felt like so what's this ge one so this has that mouse move effect where it kind of moves the page back and forth oh that's cool i like that the way the heading is like big scaled and then it comes in back to normal size that's pretty sweet anything else worth mentioning those photos move up and down what else do we got okay um we could do that we could do that heading that one's pretty basic i was looking for something else cool go ho ho don't know what this is oh no that's not what we're after i'll leave the ge one up for now and we'll um try to look at a couple others what is this skin one that could be a little too risque for a premise like stream oh that's crazy looking not one i'm interested in that is just some basic stuff all this would be pretty easy i did see somebody ask about parallax um we'll see about that scroll okay are these just separate photos that pop up on scroll yeah see this is more of that like snapping and kind of like scroll trigger i was thinking we've already done two scroll triggers for now let's i really want to find one more cool one and we can nail that down that's neat even though it's taking forever to do anything initial text change on which one luke oh no sound that's another thing i've noticed is on so many of these these uh gsap like animation demos they all have some sort of sound to them like don't play sound in my browser did not ask that oh the the uh heading the way that it comes in watch let me go back yeah see that right there uh yeah luke i guess it got dropped out of the chat i didn't see it trip paste it again maybe taylor timed you out i really like the stagger effect on the text but i don't know that it will do individual letters in a heading will it oh look at that yeah these are individual divs that's how they got away with that is this even readable like can you copy it no i can't actually copy this hmm yeah i know oliver that's exactly what i was thinking uh oh i just clicked a random link in chat okay so ask oh david said that uses split text that's not possible right now but will be one of the first updates cool ask for oh yeah that is neat although did you see i i scrolled like a couple of times and i skipped a word this is one of those things like i said where like i don't think i would ever actually use this that is dope actually where the the it comes up and has that left and right effect oh man and then it does the reverse when you scroll back up that's actually really sick [Music] okay i'm gonna shortlist that one apparently i have to hold to open this person's website i'm out of here that takes way too long yeah that one hurts my brain don't like that this is really cool how when you hover over it it like has kind of this effect with the image behind it that's crazy looking oh and the waves as you scroll too okay so what do you guys think should we pick something out of this site to do [Laughter] luke one more maybe digital engineering assistant huh let's see what digital engineering assistant has to say yeah most of these are very complex you're right some of these are super cool the way these images like kind of combine together i'm trying to find one more oh that's a cool reveal hmm that is very nice [Music] okay that's what we're going with so let me clean up my tabs here i am going to get rid of this we are going to back out of oxygen and we are going to create a new page called saint regis and then i want to grab some of their borrow some of their assets chris says gotta pop off thank you very much appreciate you hanging out this whole time i'm going to snag their logo don't tell them nobody saw that what are you talking about i didn't do anything nobody saw that okay so i had happy files i took off happy files i need it again so i can add those svg's happy happy happy happy happy boys yeah exactly they're getting free promotion who doesn't like promotion exposure okay so we got those two photos what else happens in this preloader effect so it draws the logo which i'm not gonna do but essentially we have that white div that overlays this section um hmm oh interestingly you can't actually select any of that text is it actually readable or is it baked into the image no it's okay that's a heading all right so i'm trying to think about how we would do this exactly because there's a div that overlays it so in oxygen would we have the div on top somehow what would be the proper way to do this what i'm picturing is the div in the structure panel on top and then the other one down below hmm well i guess i'll just go ahead and start building that first section that's yeah that feels right luke i agree so it's basically just a white div with the logo in the middle so i'm going to go with div width will be 100 and then our height will be 100 vh we're going to add an image which is our svg the div is going to be center center and actually i want to change the background color of the stave real quick so i can see the logo and we need this to be maybe 250. it's not very big uh asking will it be ready before black friday i have no idea i don't think david and ronnos have committed to a date yet just to make sure that it's all buttoned up before they actually release it uh what was the what was the color was the logo actually black oh yeah it is i can't change this right because the svg got uploaded as white hold on give me a second i'm gonna be a complete hack real quick one momento please is it just phil taylor like in css is that what you're talking about black zoom in oops not javascript css apparently not uh luke says you know what would be sick instead of the div moving up off the page completely but move it up to top to become the heading and then links fade in after oh yeah that would be cool that actually sounds really sick what happens to the logo after the load oh it just moves up to the top there you guys are setting the bar pretty high here do you think your boy can do it i need to add the svg in line oh okay i i got it under control hold on do not fear like i said i'm being a complete hack over here just one second i'm cheating hardcore that is true luke you are totally right oh my god that looks terrible i'm gonna make it smaller so nobody can see that pixelation okay all right so we have this div that is our preloader and then the logo is centered in the preloader and in this menu here so then we have two links we have an instagram icon a divider looks like a language switcher and then our menu block here so then uh we have image let's see i guess we'll need one more div that's gonna have some text links um menu you know what i've been asking for for a while is keyboard nav because whenever i type in text i almost always want text link and i go press right arrow key and nothing happens please elijah i'm begging you please uh federico they said that is coming soon it's not baked in currently the stagger on the text by letter not yet okay so then this text is going to be uh not main menu i'm going to go with menu links then this uh let's see typography will be uppercase then the color is going to be white because right now we won't be able to see it which is fine i'm going to change this to say home i'm going to add some margin and then we will duplicate it and we're going to say i don't know what the other one was contact or something like that contact and reserve now we'll go with reserve reserve now add class keyboard nav to oh dude you're right that'd be really nice okay so this did we're going to horizontal middle and we'll just go with center align it's not going to do anything but i want this to be horizontal and real quick so i can see my links i'm going to change the text color to black even though that's not right at the moment so this div we're going to go with layout and i'm gonna just hack this and i'm gonna go with absolute position because i want this logo to be perfectly centered this stuff may need to change but i'm just trying to get something working in this short time then we have an instagram icon so in this div i'm just going to add an icon i'm going to go with instagram change that to white two make the font size like 25 and then uh i'm not going to worry about the divider i will put another div there that has a background color of red oh that's awful go with that sort of red and then an icon inside of that uh is it hamburger i always forget menu lines what the hell is it called um is i think it's menu in linear icon yeah it is okay cool uh icon is going to be white size is going to be 25 we're going to go with 15 pixels of padding and there we go okay so then this div is going to be probably just hidden with an opacity of 0 at first on the preloader then will we change this one's height after the fact because right now it's set to a height of 100 vh and then it's going to become what like roughly i don't know maybe 30 vh and i have this set to middle a line i think this is going to work this is absolute so this shouldn't change and then below this we're going to add in another section it's going to have our background image which was this sweet looking hotel deck thing and then it says sweet collection nope sweet collection that is white change the font size way up if you make the header normal then move and animate the position to animate the preloader to header like luke said that's what i'm working on yeah i'm anticipating changing this white section to just shrink and then the background color is basically just gonna fade away oh but would that div need to be inside of this one then i think it would so i think i would need another one inside of this that's going to be at the bottom let's see so change that to vertical right and then this one is going to be margin top of auto and then bear with me guys i think i think i'm on to something here let me know if i'm doing this glaringly obviously wrong but you would want to animate the header layout i am i don't know do i do i do i because what i'm thinking is i'm basically just gonna make oh wait but this can't be hold on i think i'm gonna wrap this one with another div then this one is going to go inside of here oh drag and drop i guess you could just have the header underneath and animate the white off yeah don't know exactly okay so i'm gonna leave that there so then this div is going to be the background i i'm i appreciate both of your input very much i'm thinking i might be able to pull this off we're going to set this div to a minimum height of let's say like 75 vh i'm going to delete this section okay so here's my thinking let me walk you through this don't know if this is going to work but i'm going to try so what should happen is when the page loads this whole div right here with our links and this instagram icon and oh this instagram icon needs some margin on the right i couldn't see it that is going to have an opacity of zero this whole section is set to a height of 100 vh then what's going to happen is since it's stacked on top of this other div with the background then this one is just just going to shrink and then it's going to take the background from this white color and just basically make it transparent oh wait that's not going to work because it's not actually on top of it um it needs to be over top of it trying to think trying to think let me see here so that needs to go inside of it this div contains that there's my image oh oh yeah yeah yeah definitely can i do that after the fact actually because you can do it in motion page can't you um well no you can't i don't think you can change position we'll try okay we're gonna leave this as is let's uh go back over here to motion page we're going to try and see how far we can get with this setup as is okay so we're going to create a new timeline this one's going to be called saint regis okay so it's a page event page load so after oh we need to change our preview here so st regis so from this is going to be good so r2 uh selector on this guy let me make sure i have the right div selected 166 yes so that is going to go with our background color is basically just going to become white with an opacity of zero and nothing changes of course because there's nothing underneath it then our dimensions our height is going to change oh here we go vh we're gonna change that to like 25. look at this we're on to something here y'all that is so dope let's just look real quick dude that's not what i'm actually after but that's sick that is so awesome wow okay the other thing that i want to do is add another selector in here which is going to be this whole div uh is that one 366 is that when this one is called yes so this one is gonna have just a two opacity of one oh actually i don't need the two value i forgot that so from opacity is zero and then that's going to ramp up maybe we're even going to do it slightly delayed so as it moves up we're going to just play this oh but my links are white um how do i remove the background off this other one so on our div here which is the big one once it ends i guess i would add another selector at this point unfortunately duane the beta is over right now but um they are hopefully releasing in just a few days as the um is the plan okay so [Music] i think we need evan yo what's up dude glad to have you yeah two days in a row that's what i was thinking taylor good call so position is going to be absolute and then uh it's just gonna be top zero right that's all i really need to do so let me refresh here yo let's go oh it's gorgeous it's gorgeous okay so we're gonna add another selector here that is going to be this heading it's going to be that id and it's from opacity of zero and it's not gonna start until the other animation has completed save and then let's come back over here and we'll click on play dude oh my god [Music] holy crap dude that's unreal that's literally unreal like oh dude benedict uh it's not it's there's a link in the description below you can sign up for the preview release and um basically what that will do is whenever they release it which should be just a few a few days then you'll get a notification add a 20 pixel translation to the headline taylor is that what you're talking about so like y of 20 yeah good call oh man [Laughter] that was that was me having a moment i apologize okay maybe actually let's actually do an x translation on our div over here so we're going to go translate x uh like negative 20. actually i want it to be positive 20. so it comes in from the other side it is it is taylor hopefully somebody splices it up and makes memes out of me makes my channel grow more i kind of want this to be a little bit more maybe like 30 pixels and then i want some shadow on that text so it's a bit more readable uh this div oh so yeah with the absolute it does make it a little bit wonky which which one taylor this one the initial one maybe this one would come in about right there so we'll save that let's look at it on the front end oh the background image is jacked up that's why there's like a weird clipping effect elijah says have you taken a look at performance impact i'm grace about that so we looked earlier at lighthouse and it all scored perfect um i haven't actually had a chance yet to do it like in like an external scan but so far from what i can tell it's gonna be essentially no problem at all you can hide sections in the builder with it oh yeah i always forget that good call so i can edit this heading i want to just add a simple text shadow change that opacity down a bit and we'll just go like zero one two actually we'll bump the opacity back up this doesn't look anything special and then the background image we're going to go with cover no repeat left 50 and top 50. save and then i will turn this back on let's go what do you guys think about that i think that's pretty fresh yeah so actually for the sake of example did i not save this page oh save why did it not um welcome back chris i think we're back hopefully we're back is it back let me know please ah thank goodness i don't know what happened had to restart obs sorry about that yay okay awesome uh i don't know what we were talking about last but uh one good question popped up in chat does does it host gsap js locally or from cdn and uh rados said it can do both um and then he said it's rendered as an inline script cool uh i forget what i was doing i don't know i forget i don't know if you guys actually saw this so there is our sweet animation and the um thing over here this is in the way so let me move this down over here there we go let's go that's awesome it's so cool and so simple that wasn't complex to build really at all so then the other thing is you could build something like this we wanted to make the title snappier oh okay okay okay so you just basically change it from a second down to one second nope click play there we go yeah well actually taylor you know you could basically just drag this stuff out a little bit so the preloader could essentially just start a little bit later so it could just be like this boom let's go center on the front end yeah baby so the delay uh in g-stop you do have a delay option and all you have to do in this is just move your element out and that is how you add a delay uh fade in the logo uh sure oh actually you know what um it switches from the black one in the preloader to white on the real site does it not yeah it's black in the preloader that goes away and then it turns to white so essentially we would do i still have oxygen open where did it go no apparently i don't so let's do that real quick um i'll move this back over here so oh actually yeah yeah yeah we'll leave that so i'm just going to duplicate this and then i'm going to change this one to the white one so we're going to save that so we can just leave them right on top of each other because we're going to let motion page do the heavy lifting here so we'll refresh this and if we come back over here we should have our white one so the white logo uh it's gonna mess up the layout though is it not because it's just changing opacity so that actually wouldn't work oh i could set the scale i could change scale and opacity so the element would exist on the page even though it's there twice that's kind of goofy but you could let's go over here so evan they are gonna have presets yes but uh it currently does not for me it doesn't because i'm using a pre-release version so once we get to the end of this we have our two logos let me think about how we're gonna do this so i'm gonna add another selector and here in our timeline what are we gonna do exactly um so this selector we're going to do our white logo so this one's opacity is of course going to be from 0 to 1 and we don't want that to start until the pre-loader ends and that actually that logo should actually basically go away like right there right did that happen does it go away before the thing oh it has like a sweep effect and then it basically brushes it away hmm let me think about this i missed it i refreshed to look at it and i wasn't even looking so it scales it down and then when the sweep goes it uh disappears so then wouldn't this logo then be absolute is that what i want okay good call luke so refresh the builder real quick oh so since it's still absolute it still stays right in the middle of the page that's actually not going to help static right static that's what i want it's not going to move so refresh this builder now um let me refresh real quick because i don't feel like the changes that i'm making there are actually being represented unless i just don't know the difference between static and uh fixed because i'm an idiot huh oh gosh that looks terrible when the white starts fading in on top of the black hmm i want the logo to stay put so am i going to need to put that somewhere else in my structure panel if i took the black one and stuck it out here no that's not gonna work oh right josh okay good call so top left 50 then transform it negative 50 each axis all right so selector image then from and to translate is negative 50 and negative 50. but it still carries with it that is actually pretty interesting though so on this on the right um path there i honestly am not super worried about that what i wanted to do was just get it to look nice when it transitions from black to white so we're going to do that so we'll leave that there we have our image here and then i'm just going to scale this so we're basically going to just to scale and we're going to change this down to zero but i want that to be done like pretty soon in the animation so here is where our preloader goes yeah i figured we'd have to change the structure a bit because it wasn't going to work so i want this to be like super quick actually that kind of looks terrible honestly i think i'm going to not use i think i'm going to do opacity as well so 2 is going to be 0. uh scale also looks absolutely garbage i think i'm just going to make that go away and then our image will come in sooner so our images opacity is going to be one and again we actually don't need the from in this case since we already have a two of one so we're going to start this that's kind of cool because you can't really tell that the black goes away because the white picks it well actually yes you can because they're not in the same position but i think it's close enough oh well our logo is in the wrong spot because then it whenever we can get dynamic classes because i think in motion page you'll be able to add and remove classes based on different things in the future we'll be able to fix that but the black one actually technically still exists right here which is why that's not lining up properly so maybe there's a slightly more elegant way to do this i guess you would possibly want the scale to be zero could you scale from 0.5 to 1 and on hitting 1 it changes to white yeah i think you could you just need two separate uh you know kind of like entries in your timeline okay that's a little bit better so the alignment's still not quite right i bet the element probably still takes up space um also the fade effect isn't exactly right in terms of you know comparing it to our example because it stays white yeah we kind of changed this because we ended up turning our preloader into our header i think if you were to achieve this exact layout you would use a different div and you would sweep it up which actually might be a bit easier to recreate this more faithfully but i think the point remains that this actually does work even though this is not really that readable there's definitely things that you'd want to fix here in terms of layout and structure and stuff the point remains that like you can do some pretty dope stuff try using css filter invert on the black um where is my black image so filter i'm assuming i can't put one in a percentage field yep that doesn't seem like that works all good i'm really really stoked on how that is obviously this isn't gonna be a real sight but that does work very well um yeah so invert 100 oh yeah good call let me try that where did it go filter i can't scroll down in this menu hopefully invert is the last one let me change the get rid of the scale and the opacity here so we can see it oh yeah it does why are my headings misaligned here let me save this and refresh there we go there's something weird with the layouts so then actually i wouldn't need the white one oh wait but the white one's the svg is it not i don't think that matters so if we restart our animation so we now have one logo yeah sweet thanks josh and taylor that's super cool so instead of you know trying to mess around with layouts for two different logos we just use that that filter invert 100 that's so cool dude this is this is straight up crazy this software is unbelievable that's extremely cool what do you guys think of this super cool i'm very much a fan of this so we got some pretty sweet uh setups going on we use the pin and just needs 25 black overlay on background to be readable oh yeah yeah yeah yeah yeah so it would be div block 366 i believe right uh 1666 which where where is that one in our thing we actually don't have that yep i agree elijah i'm just gonna do the background overlay in oxygen save and refresh there we go oh baby it's a triple i i'm just basking in in this amazingness right now i don't know what else to say i don't think it's anything close to revolution slider but i can see where you're coming from on that for sure let this stream be the launch event says oliver and about 300 less divs yeah totally well we did some pretty sweet layouts here so i want to say thank you to all of you for hanging out for what has it been now uh i don't even know the stream timer reset because obs crashed um two hour two and a half hours i have some work to do before the end of the day and next week is a holiday for those of us in america on thursday it's thanksgiving and uh i'm going out of town so i'm stoked to be here if you haven't already click the link in the description below to get motion page sign up for their wait list and they should be launching here in the very near future uh rados and david if you guys are still here in the chat thank you so much there is rados i see you you guys rock this is a great piece of software thank you for being here the whole time and uh i'll stop taking up your time now so you can launch the software and you guys can get some money sweet thank you everybody before you leave drop a like subscribe and i'll see you in the very near future

Channel: Permaslug

Views: 2,944

Keywords: motion page review, motion page gsap, gsap animations wordpress

Id: uFiNyQc16G0

Length: 158min 18sec (9498 seconds)

Published: Fri Nov 19 2021