GSAP animations in Webflow (animate a hero with 3D Spline scene)

in this video you will learn how to create smooth animations with G in webflow first I show you the structure in web flow then I show it inside into spline there I created an interactive 3D transition then it goes into the custom code I will show you how I created the timeline animation for the hero of my website I will also show you how to use the position parameter of G to create precise timings and how to use a stagger to animate multiple elements one after the other first let me show you very quickly how I built this hero section in webflow so um this is my hero with the class section hero and I set the position to relative and inside of this I have this spline scene on this element I set the position to Absolute and um set this to full and gave this a very high Z index so basically it's um overlapping all other elements so when I shrink this down a little bit uh you see it's overlapping a little bit but I set the um blend mode to different so you can look through this so when I deactivate this you see it's overlapping all other elements here but I like the effect when you can look through this 3D object then I have this container here with my um Herer elements and I set this one um also to flex and gave this a direction horizontal and justify space between so I have this two elements inside of this and space between just means that um once one element is on the left and one element is on the right so if I change this to justify start you see both elements are on the on the left when I set this to justify end both elements are on the right and space between just means set one to the left one to the right and then I have this hero content uh container and um this is also a flex container with Direction horizontal on the left I have this um Arrow element and on the right my main text elements in my hero where I have my H1 and a divider um my meta texts and yeah that's basically it um so um maybe just a little bit more information about this 3D object when I go to the preview mode you see it's already following my cursor so there's already a very nice interaction and this interaction is something I made um entirely in spline let's check out what I did in spline so I open spline here so this is my um my scene I created for for my hero and maybe you Noti this from my little side project three dimension where I integrated these uh elements um also on the whole side and you can scroll down and they are moving and this is exactly the same element and I just change a little bit here or change the materials Etc so um when I go into this you see I have this group of spheres so I have four of them and every sphere has its um different states so one b base state so maybe I just go into this one into this big one and you see this is the base State and this is the my edited state so you just can add States when you click on this plus icon here on the side and then you can just change some values here like the position the scale the rotation you can change some values in the material um options and then you can create an animation or an event uh so you just can click on the plus icon here you can choose um when do you want to start the animation so maybe just right at the beginning when the user uh enters your page or maybe on Mouse click on uh key press on scroll Etc there are a ton of um options here so and then you can choose an action so um in my case it's a transition so let's go into my event um I choed a scroll trigger on this one so when the user starts scrolling this um transition is running so it's animating from the base state to my um edited state to this one and um yeah it's basically just an animation this is something I did for every sphere here and also I have this group so I created this one and added a new state here so I have two two states uh and where I changed the position and the rotation so here I have this start animation so this is running when the page loads uh so when the user is entering my page and yeah that's basic basically it um maybe just go to the export settings and here you can see you have this um play settings where you can um choose between different options and um I added this on Hover effect and this is uh this effect when you're hovering over your elements that are moving and um this is something you can just activate here on Hover so when I deactivate this and update my viewer and then go back to the preview and you see when I move my cursor nothing happens only my start animation is running so this is um this one I added to the uh whole group you know because I set this event to start I just open this and then the animation is running and I activate this one again here in my play settings on Hover update my viewer and you can play with these values and then I go back to the preview and you see I have this very cool effect all right so that's it um that's everything I did in spline so you have this um export settings and here you have this viewer and this is the URL you need for webflow so just click on this icon and the link copy to clipboard and then go back to webflow add the spline scene and go to the settings and add your url so and that's basically all you need to know for this one and now let's go to the custom code part where I add the gab animation and yeah let's prepare this one let's head over to code sandbox and here you first need to create an account and then click on new Sandbox and here you can choose the template and all we need uh for this one is just a static template so we don't need a bangler or anything like that in the background so let's choose static and now we have this code editor in the browser and that's basically the idea behind code sandbox so you just can write your code right in this editor and it's all browser based so this is very uh powerful in my opinion so what we do here now is uh that we create a new file and maybe let's just call it main JS and you don't need the HTML file or the Json files here but you just can ignore them and what we need to do here now is uh to grab this URL you see this uh right here in the right area in your preview browser so um just grab this URL and go back to to webflow and then you have to go to the project settings of your webflow project and then go to custom code and here in the photo area just um create a new script tag and close it and then you just have to copy this URL and paste it in here and let's save this and let's publish this and then open our proof site here and maybe I just place this one side by side so I use the arc browser where I can use this split view so on the right I have this um the webflow side I open the console here and um on the left I have my code sign box and now let's just um add a console lock to test it if it works so this is my console lock I save this with command s and then I refresh my webflow site check the console and here it is hello world so we successfully integrated our code sandbox Javascript file into our webflow site and now we can add our custom code here in code sandbox and it's just um available in our webflow project and that's a very cool setup I think because I personally don't like the native web flow integration that much because um it's very limiting that you don't have um very much functions it's just basic syntax highlighting and therefore I always use code sandbox to write my custom code all right let's go back to our um webflow side settings and here we just need to add Gap so go to the Gap website and let's head over to docs and um then you just can go to installation here and choose everything you need um in our case it's totally fine to um use the CDN so we have this script um link here we don't need any plugins I think um in for the hero so I just copied this one the gzip Min file and it's important that we put this before our um JS file because only then we have access to the G library and then I want to use something called split type it's another uh Library it's a very um simple library to split up um html text into um elements so that lines words and characters can be animated independently and um it's also inspired by a g plugin called split text so um you also could just use this um CDN link here uh let's copy this one go back to the webflow settings and add this here um in the footer again so let's delete this comment and save this yeah and that's basically everything we need right now so now we can start to write our code and I go back to my code environment here so close my console I don't need this for now now um on the left side I have my code sandbox editor I will close this file explorer so just click on this icon here so I have full focus on my code editor here and I will delete the console lock and now we can start with our custom code and we begin with the split type um code here so just let's go to the documentation here on GitHub and here we see what we have to do to split our text so so we already included this one and now we just have to uh create new variables and then say New split type and add our Target here so this could be your class or ID and now just go into our code sandbox and let's start with our hero title so I say con hero title and then new split type and here I just have to add the class of this element and in my case it's hero title heading one and the next one is the hero subtitle and here I say new split type so and this is something I could just copy so hero heading three hero meta main text and hero meta sub change the variables hero Mana sub and hero Mana main so when I go into my webflow side and then here in the dev tools and you see when I'm hovering over my text elements uh that they are divided into multiple parts so each character is a single div element each word and each line so we can animate them separately and now let's start with our Gip code so just create a new Gip timeline here so let's say um const inro TL gp. timeline and then go into this timeline and let's say we want to set our hero position to minus 25% on the xaxis and let's refresh this and you see it moved to the left so this works well and now let's add our animations so first I want to animate the hero title and because we already defined this um here in our split type function we just can call this like this um just type your um variable name and then you can choose between chars for the characters or words or lines um I want to animate uh the words so I add this one and then let's say we want to animate the Y position um I say 100% And then I refresh this on the right and you see um my text is coming from the bottom to the top so this works very well already and and if you're wondering why we have this um little bu when I reload this page you see when I reload and and this is because we are working in the code sandbox and of course our webflow code uh so everything we set up in webflow is um loading first and then after a few milliseconds um the code sandbox code is loading and that's the reason why we have this um little bug here but we will fix this in a minute so add a few uh more lines of code here so we want to um add a EAS effect here so let's say cir out and the duration of 1.25 and a stagger so maybe just 0.15 I think that's good yes you see um there is a slightly delay between each word and now let's maybe say we want uh to animate our um header bar so let's say from um do header bar and and I want to animate all child elements from this uh so let's say opacity 0 y minus 20 pixels and then also at a stagger and the duration by 0.75 and then we refresh and you see these elements are um fading in but I want this animation to start uh at the same time as the previous one so we can add uh a position parameter here so this is our from animation and then we can add this position parameter here so um like this one and this means start with the preview one so let's refresh this one and you see this is um starting at the exact same time and if you want to know more about the position parameter let's go in into the uh G docs and here I think on the timeline or let's go into resources and here you have this position parameter and here can read a lot of more about this topic yeah you can position your animations like you want you are not limited to create a timeline which is running from start to the end but you can um yeah change everything like you want and I think this is pretty cool so go back into our code sandbox and now I want to animate this Arrow element here let's say from and then we call this um hero Deco Arrow I think this is the right class of this let me check this in a minute um I want to animate this with a white person and my uh 100 and x% minus 100 then a duration by 1.25 and is Expo out so let's check if this is the right class yes oh yeah this this looks looks cool but I want that this animation also start a little bit earlier so we need another position parameter here so let's add this one right here and let's say we want that this animation is starting um 0.5 seconds after this one so let's check this again yeah I think this is pretty cool and now I want to move this hero back to the right so let's say um two hero x per Z duration 1.5 E power two in out we set the position here um to minus 25% and here we animate back to its original position so it's starting on the left and then it should be moving to the right ah okay we need to call the class here yes right it's working very cool all right so uh now I want to um animate this whole um 3D element here so let's say from hero spline and then let's say x% minus 20 y% oops five and opacity of zero and and let's check this one oops [Music] so all right that's way too fast so of course let's add a duration here and E so maybe power two in out and refresh this all right so I think the animation is okay but it uh starts way too late so let's add another position parameter here and let's say we want to animate this um again um like the previous one yeah that's cool so when uh the whole hero section is um moving to the right it looks like it pushed the element to the side so this whole group so it's moving to the right and yeah I think this is pretty cool so U maybe add another very cool effect um a little blur so we can add this filter blur let's say 40 pixels and refresh this yeah I think uh this is a nice effect to add uh some depth to to to the animation so refresh and yeah just continue um with our timeline I add another animation for this divider here so let's say hero divider and let's animate the width of this one let's let's check this maybe also animate the opacity from zero and the duration maybe of 2.25 is of course let's say Expo out and let's refresh this one and of course yeah the effect looks cool but of course we uh need the position parameter here so let's say we want to animate it like the previous one but um 0.25 seconds later yeah it's like it's still in the movement but it's uh not starting with the previous one um to the exact same time but a little later and yeah that looks good so now let's animate these text elements on the bottom so let's say we want to add another from animation here and animate our our subtitle and we want to animate the words so let's say again y person 100 and E power two in out with a duration of 1.2 and the Stagger of 1 uh 0.08 all right this is the text here on the left where we need to add the position parameter again and I want to I will copy this one the 0.25 let's test it again yeah that looks good because it's still in the movement the hero section is still in the movement and then the text is coming in and this looks pretty smooth so then we want to and animate our hero metam main. wordss and here we um also animate the Y person 100 is power two in out um a duration of 0.8 and stagger of 0.08 and of course we add a position parameter here let's copy this again oops 0.2 five let's check this okay you see only the text is hidden for now but we also um will animate these um Corners here so we can um add another from animation here so let's say um hero meta deco or no I need to call the class herro metco I think this is this one and then let's say the opacity zero let's check this okay this is the wrong class name so let's go into the webflow designer to check what's the right uh class name of this one okay it's this one hero meta main Deco so let's take this um or um we need to create a variable because um there are multiple elements of this one so let's go um up here and let's add this variable here Deco document query selector all and then the class name so now we uh select all four elements and not only one so go back into to our G timeline and add the name of the variable hero Deco this is this one and we select all four elements here so we animate the opacity from zero yeah that looks good and now we want to increase the duration a little bit maybe one second uh we can animate the elements uh on the Y AIS let's say just a tiny animation here so let's say five pixels and uh stagger of um 0.25 maybe so let's check this all right that looks good but I don't like that um always um I'm animating from the left to the right and then the left corner and then the right corner but I want that this is a random animation so what we can do in G um is to animate a random stagger each 0.25 and then from random and now um it's totally random which element comes first so let's test it again yes you see uh that was the first element and when we refresh again um it's another and then it started on the right and the order is always different and I think this is pretty cool in this case so and now lastly we want to animate this text here on the right so let's add another from animation and we want to animate the words so let's say hero meta subword without the quotes Here and Now y person 100 let's add the ease effect um Power two in out and the duration of 0.8 and stagger let's say 0.04 all right let's check this okay two things again we we need more position parameters so first on the decoration elements here so let's add this one here we want to um animate this with the previous one with this one so when these words are coming in um these Corners are um Fading Into and then we add the position parameter here 0.25 and now let's check this one oh what was this ah okay I made a mistake here because now we have to find an absolute position parameter so this animation plays 0.25 seconds after the start of the whole timeline of course we don't want that um so now we add here again this symbol to create this relative position parameter and now it starts uh 0.25 seconds after the previous animation and let's check this again there that looks better all right yeah that's it that's the animation I think is pretty cool what do you think write it below in the comments and here we can hover over this one we um can close our code editor here and PR this in the full screen and yeah I think this looks very cool so now we can fix the bug that happens when we enter the page so here we first see the state that we have defined in webflow and um to do this we simply copy our code from code sandbox and paste it into webflow so just go to code sandbox copy this maybe just create a comment so this doesn't work anymore and then go into your um web flow site settings and then create a new script tag here and then paste it in click save and publish and then we see it's working fine there are no bugs anymore there's no jump at the beginning it looks very good so that's it this this is how I create Gip animations in webflow and if you have any questions feel free to let me know I will be very happy to answer them and if you have any video requests just write it in the comments so thanks a lot for watching see you then

Channel: Dirk Lach | DESIGN2CODE

Views: 14,194

Keywords:

Id: ozbHWBM9V0E

Length: 31min 14sec (1874 seconds)

Published: Mon Oct 23 2023