Creating staggered animations with Anime.js and Grid in Webflow - 10/13/2021

hello welcome everyone to today's live stream uh my name is john and i am the creator of web dev for you i do these live streams every monday through thursday from 12 pm to 1 pm central and in these live streams we discuss everything workflow from building layouts and animations adding scripts we also yeah we go over how to build sites and web flow and i also provide support via super chat if you need any assistance with your personal project so today i decided to have a bit more fun with animations and an animation script that i really like it's called anime.js i'm a big fan of animations if you've been watching my youtube channel you'll know that i'm big on animations and big on kind of innovating or like using these different scripts to make websites more engaging make things more visually cool or pleasing or just use animations in an effective way to add a bit more depth to a site so today we're going to build this hero section with this animating circle with circles within it and we'll use that same effect to create this animation for like an image so we can add an image and then add a grid stagger effect behind it so the script we're using today it's called anime.js and it's just a really amazing animation uh script and i can go ahead and go to their home page here it's by julian garnier and uh yeah it's just a great script that he created and there's just so many amazing things you can do with it so [Music] my two favorite animation scripts are anime.js and green sock and webflow interactions is also up there i mean it's it gets an honorable mention for sure because you can use interactions to create a lot of amazing things but sometimes with scripts you can target multiple elements a bit easier than than using interactions in webflow and some of these scripts just have really amazing easing functions which makes it great to work with all right so this is the site this is the documentation and yeah we'll also be creating a button in this tutorial so when you hover over the button we have that effect so one thing i didn't mention as well we're going to be using grid to create this effect because it is a grid of elements so we want to create a grid of elements you know like a 10 by 10 grid and then we can use the script to animate it so in the documentation at animate.js if we go to staggering you can see how we can stagger a grid right here so using the power of grid so yeah webflow makes it really easy because they have the grid function so using the power of grid and animate.js we can create an infinite amount of different designs and ideas using this staggered concept uh hey manuel how's it going um so yeah this is what we will be building today yeah let me set up the agenda as well really quick i should do this beforehand so today is the 13th it is a wednesday and we're going to build a stagger animation with anime.js alright so yes welcome everyone yeah today's wednesday 10 13 and the agenda 12 to 12 30 we're going to build a stagger animation with anime.js and then from 12 30 to 12 40 i'll field any questions about this build and then from 12 40 to 1 uh we'll have a general web flow discussion and i'll field any super chats all right cool so let's go ahead and get started with the build and welcome everyone so manuel writes do you have any idea in which direction what flow's planning in terms of interactions it's already so great but stuff like this natively would be insane uh it would be great manuel i'm sure webflow is probably working on something you know i've heard rumblings of things that they are working on but obviously i can't share that but you know webflow is always innovating so i wouldn't be surprised if they added a stagger function like this or added more robust animation features to interactions i'd be the first one to like geek out over it if they did because i know there's a few things that interactions not that it's lacking but things that i wish it had and i also looking at the easing of green sock and even anime.js sometimes i feel like the easing is just like smoother or something like i don't know how to explain it and webflow did recently add that graph editor so you can customize your easing so i haven't played enough with that to get like really precise easings but um yeah i wish like interactions had a more like unique easing engine like that was just super smooth um but yeah and it's pretty smooth but like when i work with green sock like the smoothness is just something else so there's something to be desired i'd have to say there with interactions yeah really cool anime jess but i'm all in gsap for sure eunice g sap is amazing i could do the same thing with gsap it would be you know create a staggering animation like this uh yeah no we're so spoiled you said it perfectly manuel like i don't know if webflow's ever going to make everyone 100 happy there's always something that we want or you know it's already an amazing tool and uh you know we always want the whole thing and that's why i think webflow's on track to be like the most powerful uh visual web development tool because it's web flow's only on an uptrend i don't see them like stopping creating or i don't see webflow stopping let me see if i can say this right yeah i don't see them stopping anytime soon as far as creating new features and new things for for customers and users um so yeah i definitely hear that manuel hey kavita hey dylan what's up what's up um yeah we're gonna build this and we're gonna build this today and we're also gonna build a button uh using anime.js uh so for anyone who's new here and who's just joining the live stream or is if this is your first time i do these every monday through thursday from 12 p.m to 1 p.m and we cover everything webflow we design and design and build websites in webflow we cover interactions and animations and i provide support via super chat so yeah i decided to take a little break from layout building today even though we are going to build layouts this is technically a layout it's a very simple one but it should be fun and one thing i can do actually to make this layout a bit more interesting is just add a button and i'm using this color palette here for for this and um enter so we're just going to call it button so i'm going to start the actual site but i just want to add a bit more design elements to the site to make it a little bit cooler and we'll do something like this and for the text there we go something like that this was really quick so enter and we'll add a border radius all right just wanted to add a quick little button here just to make the design a little bit more full something like that okay i don't know cool so yeah let me start actually building the site rather than embellishing the one i already made um but yeah let's go ahead and get started i'll start with a blank project and um yeah i'll be co i'll be dividing the video up into sections so youtube has a cool feature where you can add time stamps and that way users can just fast forward to me building rather than like i know sometimes my intros are a bit long and we're just discussing here all right so per usual we'll start with the section um call this section set the min height to 100 vh and this is just going to be a full viewport hero section so i'm just going to add a div block i'm going to call this hero wrapper and set the position to absolute and full set the section to relative for the hero wrapper i'll set it to flex horizontal align stretch justify start audit div block i'll call this hero left and grow if possible copy and paste this and duplicate this class and i'll call this hero right okay so now we have a left and right section perfect um let me go ahead and install the font this font i'm using for the heading is sign so i'll go to fonts let me lower my mic here and go to sign it's a sign no it's uh yeah thanks for for everyone for putting up with my hiccups yesterday i watched the video i rewatched it and that was not cool um yeah oh the the software i used uh kavita is sizzy and i hope i don't have my template here i'm probably gonna showcase it all right no okay yeah let me do this uh the software is called sizzy and yeah let's just view the site on multiple devices i love this piece of software it's amazing it is a subscription i pay seven dollars a month i think for it but one of my better investments i would have to say because you can view your site on multiple devices so sizzy and i'll type it out here their website is sizzy.com okay so back to the project left and right we installed the font uh hero left let me set the flex setting to center center so anything i add will be in the center i'll go ahead and add a heading let's dial the all h1 global tag let's set the font to sign let's set the size to 56 and line height of 1.3 dash and let's give it a cool title so innovating innovating at the highest level ooh that sounds cool to the section i'm going gonna add some padding um yeah let me add some padding 10 vw from the left and the right and then i have to change the hero wrapper not to absolute but relative and set the section to center center okay that works and the hero wrapper set at 200 percent there we go okay cool perfect um nice and then we'll add a paragraph so let me add a paragraph element and let me set the hero left to display vertical and i'll call this let's style the all paragraphs and i used exo for the demo but i think i might want to use something else um maybe verdana how about system ui system ui is actually nice let's use that i wonder why it's called system ui i'm not sure is it just using the browser ui i have no idea um all right xo isn't bad how about ariel no exo yeah we'll stick with xo maybe make it 16 no 14 is good line height of 1.3 1.7 dash all right and i'm going to call this hero heading add some margin to the bottom so again whenever i'm customizing the margin i do like to add uh custom classes okay let me justify this to the left the hero left and i'll call this hero button cool and we'll build this first demo yeah this one here this first one and we'll just get started with anime.js and just take a look at how the script works and then we'll move on to other examples so yeah let's see here so we have this button let me go to the color palette we'll use this red and let me go to the site here we'll say red and for the font let's do sign and let's do learn more that's better learn more is a better button description or title let me set the font to 16 1.3 dash for the line height let's add a bit more padding to the left and the right and set the border radius two to eight and i'll give this hero paragraph and we'll say 20. all right nice okay so we have the hero right i'll set the flex setting to center center and let's add a div block in here so i'll add a div block and i'm going to call this um let's see what i did here just gonna reference this and sizzy is it loading in real unreal devices or just giving the different screen sizes uh different screen sizes manual you'd probably want something like browser stack if you wanted to emulate actual screens because i think browser stack uses the actual device sizzy's just screen sizes um oh and i actually changed the design of this too i like this design more um what did i call this grid stagger grid okay um yeah i like this design better that's cool all right so let's go back in here and for this i'm going to give it the class stagger grid and i'm going to set the width and the height to 50 by 50. no 500 by 500 there we go that looks good let me make this paragraph text uh 42 ch something like that or i can better yeah i can add some padding yeah that's better let me add some padding of like 100 here there we go all right so we have this dagger grid i'll give it a grid display setting hey dylan uh i've been waiting so long for this tutorial dope um happy to hear that so i'm going to create a 10 by 10 grid so 10 columns and 10 rows and then click done so we now have a 10 by 10 grid and it's 500 by 500 meaning each uh grid grid cell needs to be 50 by 50. so i'll add a div block and i'll call this small square and then i'm just going to copy and paste multiple times i'm going to hit uh command v to just paste it multiple times and actually for the small square let's go ahead and give it 50 by 50. all right let me undo that sorry forgot to give it a an explicit width and height first so 50 by 50 that's better and then let me grab this red color select the small square give it this background i'm going to set the alpha to 10 so the opacity is 10. and then i'm going to give it a border of one pixel and set it to red okay now i'm going to command c this grid cell and let's just look at the navigator see what happens uh command c and let me pin it here okay so copy paste so we're just pasting multiple times until we the grid is full all right so we have a hundred grid cells in here and you can see it added them all here which is fine and great so now we have our grid so for the animation what we need to remember is this class name stagger grid and small square so now let's add the animate.js script and actually before i do that let me add a nice background color to this site so the section select it there we go all right cool so animate.js you do want you do need access to custom code and webflow and to have access to custom code you need an account plan or your site needs a site plan so you need a light account plan or hire or any safe plan for your project yeah yeah browser stack i think is is expensive you see my tea handle here okay my friend would kill me for having tea in in a bag she always steeps the tea which is the right way to go never recommend using tea bags here but when you're in a pinch you gotta get the t all right uh so let me go ahead and um what am i doing here yes adding the anime.js script so i've mentioned this in previous live streams when adding a script to webflow you want to add it in the before body tag and you want to use a cdn i like using js deliver or you can use cdnjs which is an amazon cdn i believe so then we search for the c uh the script here so i can type in uh anime.js and it's right here i can select it and i've already selected it here just toggle this button then click here show and configure all links and then we want the html output right here and we want to copy this script source with the script right in here so i'll copy it go back into webflow and paste so now i have full access to that script i can call it i can do whatever i want with it and use the different features it has so now i want to initiate the script with specific features so i'm going to open a script tag and i'm going to close the script tag and then i'm going to add my code in between there so let's go into the documentation for animate.js so we have our grid so we used we built the grid using grid and webflow which i love when things match like that so grid and grid yeah obviously because it's a grid and then i would i just want to copy this code here so i'll copy this code and i'll paste in there and all we have to do here is replace these class names so in the demo he uses the the name staggering grid demo for the the grid wrapper and he uses uh dot e l for the individual um squares in the grid so he targets it that way so we just have to change this so for the the grid wrapper i used stagger grid and for the squares they're called small square small dash square so if there's a space in your class name you want to put a dash and you want to make your class names all lowercase because that's how webflow outputs their classes like you know if your class class name is you know for example here i have hero left it would be lowercase h and a dash and then a lowercase left for the actual class name so let me save this and just to show it a bit better so the grid wrapper is called stagger grid and you know it's just capital case but the actual class name when the code is outputted is dot lowercase s dash lowercase g so dot stagger dash grid all lowercase okay and then the same for the sum a small square it would be small dash square and all lowercase so those are the classes we targeted here and that's it and then we want to change the grid here so it's a 10 by 10 grid not 14x5 so you just want to give the dimensions of your grid here and ours is 10 by 10 and we want to animate it from the center you could animate it from different directions again you can go into the documentation and just look at the different the different options you have here so you can do center last or first and you can get some very interesting effects with that we can try that out as well but that's it just copy and paste that code target the grid wrapper and then target the squares inside of it you can change your easing here here i'm scaling the different grid cells you can move them you can do anything you want with the grid the small squares and then here's the delay so we have a 200 millisecond delay we're targeting the grid it's a 10 by 10 and we're animating it from the center so i'll click save publish and we'll have an animating grid you can do so many interesting things with this yeah like even that like i'm i'm loving that that's really cool oh the other thing we want to do is loop it so it's not looping so looping is quite easy in anime just put a dash after your last property or a comma to add another property and we'll just say loop is true and that's it loop colon true and then it will loop um yeah so it's such a cool effect and you know it's pretty simple you know so not many steps to it but look at that that's such a cool effect i mean someone going to a site and seeing that would probably think like this is a super expensive website or something and you can really wow your clients with some cool animations yeah and there's other cool things you can do i'm not going to do it here i don't think it would work necessarily i'm trying to think how i want to do this but you could add like an image to the staggered grid right like this is not going to look good because the image is is a different color but i could actually find an image here that i like um let me do a black and white image so something like this i'll just add it and we can add that to the staggered grid and set it to cover center center that actually looks pretty cool um don't need it to be tiled i'm actually digging that that's a pretty cool design maybe because the image is cool but it's like a solar system or like these circles that are really unique and then we have this grid over it that's gonna be animating i'm curious how that's gonna look um that's pretty cool yeah so if i were to do something like this well first off let's let's uh make this dagger grid a circle so let's set the border radius to 50 percent so it's a circle and then let's set the overflow to wow you can do so many cool things with grid i'm loving this grid feel yeah i do like working with grids even in after effects like something about the structure of grids it's just satisfying or something like the alignment and using it in design is just really cool um so yeah let me set the overflow of this to hidden and now we have a circle and then for the small squares i would set the opacity higher maybe like 90 something like that or even 100 right 100 and then i would set the [Music] i could add a the border i would make it the same as the background color so now the grid is going to be revealing the image behind it so that's just one kind of creative way or like different way to do it you know the possibilities are endless with this effect which is why i really like it um so yeah like you could have a background video or something i don't know if that would work too well but you could have the grid revealing something behind it or a color or some gradient or something interesting you know you could have you could do so many things with this you know i could add a shadow to this to add more design kind of elements to it and let me grab let me grab this color oh that's that's super dope nope woohoo okay i'm not gonna spend too much more time on this one that's nice i don't know if i like the shadow or the image kind of effect there so i'm going to just hide the image for now let's change the border back to red and the color give it an alpha of 10 yeah that's dope i like that oh and then for the the squares we can make them circles so all we have to do is select any of the small squares and set it to 50 percent i'm loving this okay let me set this to red there's so many things you can do all right let's publish that that is cool it's kind of like biology or something or like something under a microscope man some client would love this i know for that for sure can you have different images on the animation reset um yeah you probably could win well you probably could do that with a slider so put a slider inside of this div and then just time the animation so that when it's fully present the image changes behind it and then there's a new image appears you just have to get the timing right with the the timing in the script and in here but yeah that's amazing i think i'm going to use this for my my youtube image i like that okay cool so let's continue with this we might just have fun with this all session today or the whole live stream um if there if there's any questions about it let me know i think oh kavita asked that sorry it wasn't manuel yeah so yeah you probably just put a slider behind it all right so i'm gonna duplicate this page just gonna duplicate right here i'm gonna call this second example all right okay got that little message there so for this second example i'm going to uh yeah for this i'm going to duplicate this class i'm going to call it stagger grid second okay and then for the small square this first one i'm going to duplicate it and call it stagger grid uh small square second okay i'm going to delete all of these so delete all of them except one i thought if there were if i thought about if there was an easy way to kind of change the class name here but i thought about putting the the small square in a in a symbol but i think that'd be a bit tedious okay so i'll just copy this div block and paste multiple times until it fits the grip it fills the grid and we're also going to make we're going to make this grid let me remove the overflow okay and wow that's cool with that line there i'm going to set the the height of this to 600 and we're going to add 10 more oops uh yeah and i'm going to set the call the rows i'm going to add 12 12 rows so we have 10 columns and 12 rows so just a bit taller and yeah let me copy add a few more in here awesome cool so that's done and let me remove that circle okay and remove the shadow cool so we have a 10 by 12 grid that looks good and i'm going to change these to uh squares okay so they're just squares and how did i do this in the other one yeah so the stagger grid ah right okay so the hero right we want to set it to a position of relative and then i want to add a div block and call this uh hero right image set it to a position of absolute and full so it fills the hero right so we have the grid and then the image on top and then i'm going to add a background image here set it to cover position it in the center don't need it to be tiled and then i'm going to add some padding of 50. no not padding margin so hold down shift and add a margin of 50 by 50. all right cool and i'll add a border to this set it to 3 and we'll grab let's use this color here set it to this color and then we'll change the color here for these grid cells uh yeah it's kind of interesting not bad i'll probably change the color here for the text too just to make it match in the button change the color that's kind of nice not loving the contrast i would leave this at black i don't know how i feel about the screen to be honest let me use the blue the darker blue yeah that's all right we're not gonna worry too much about it okay and this border needs to be blue okay cool um yeah so now we just have to go into the code and change the class name so i'll just add a dash second to both the the grid wrapper and the small squares because we added that class name and the grid is now 10 by 12. so i'll save publish i might find another image because yeah i'm not feeling these colors too much uh yeah not sure what happened there what he will write image position absolute hero right has a position of relative staggered grid 500 by 600 i'll just give it 500 by 600 or maybe 100 percent huh oh yeah i love when things work how they're supposed to um hero grid second alright 50 with 100 no needs to be absolute oh that's right bear with me a sec while i figure this out oh three hundred pixels by 600 pixels uh okay hero right image it is a diff block somebody's probably catching what i'm doing here or we can do this maybe no um with remove that yeah that should be working but when i publish it does something else i'm not going to spend too much time on this here but that's curious i don't know what's up with that you're right maybe this needs to be 100 no that's not it let's see what i did on this one yeah hero right okay and second demo red wrapper oh okay swear sometimes sometimes will flow i think i have to put this in another div put this in here set this to that grid wrapper set this to position of relative set this to a position of absolute and full grid wrapper needs to be 500 by 600 not 5 500 there we go and okay so both of these need to be absolute and they need to be in a div okay then i can remove the width and height from this because we added it to the grid wrapper great great hey what's up tommy we're having fun with uh staggering grids in webflow today um so yeah so that works but through my whole design off here so let's see what i did hero right yeah this that needs to be like that needs to grow if possible so that they're both equal size on the left and the right the last thing i want to do is a button so we're gonna apply this grid animation to a button on hover we're gonna see if that works and i'll grab a different image here in a second yay that was it so both the grid and the image need to be positioned absolute and then we have this cool effect going oh that's so cool uh we can also play with the direction so i can say like let's try for this one here on the home page it's probably not gonna look great but um you know we can set the direction to first and it'll animate i think from the top left yeah wow that is that is actually very cool i really like this design kind of geeking out over it so clean and simple um noise so yeah let's do another one so let me duplicate actually i'm not going to duplicate anything here i'm just going to create a new page you know what i will duplicate never mind third example create all right so for this example we're gonna delete uh hero left and here or right just delete all that and let me call this hero wrapper third i want it to be center center okay for this i'm going to add a button so i'm going to add a link block and i'm going to say 300 by 200 so we can see it 300 by 100. let's add some border radius make it look cool oh no we'll leave it square we'll leave it square for the background color i'm going to use red and let's add some text so i'll add a text block in here let's make this link block center center remove that underline and make the text white and also the font is going to be sine and i'm going to call this learn more cool let's do sign bold god sign is such a cool font i love this font or type however you want to call it all right learn more let's make it a little bit or add some more padding here you know what let's remove the width and the height and just use padding that's better boom learn more okay so we have that link block and i'm going to call this grid link block okay so i did something wrong initially we don't need a background color to this so let me remove it and let's set the link block to grid yeah we're going to set it to grid and we're going to make this we do want a specific width and height actually so let me undo that so for the grid link block let's set it to 300 by 100 and this would make a let's see 10 a 30 by 10 grid so we'll set the position and for now let me hide this text or uh yeah i'll just hide the text for now so we have this grid uh browser stack is like a a website that lets you test your site on different devices uh tommy hey tazewere how's it going uh so we have a grid here okay so we we added the grid we're gonna do 30 no that's columns that's the gap so zero and zero so let's do a thirty by 10 oops 30 by 10 grid okay and we have the grid let me delete this text block for now and then i'm just going to add a div this div is going to be 10 by 10 pixels it's going to have a background of red this is either going to be really cool or really weird so just bear with me um all right so let me call this um button square okay then i'm going to copy and paste this multiple times all right so 30 by 10 so 300 300 grid cells that might be a lot but it could make a really cool button let's see can we handle it can my browser handle it my cpu i'm like testing the limits of my my browser memory probably so if that's the case well no it's handling it well one two three four five six seven eight nine one more and 10 bam all right so yeah that's an interesting button so we will have to put this in a div block i'm going to call this button wrapper uh so sorry in the site for this great animation okay so this is the site here uh tommy and there's also actually it was no not this one i'll close this one and we have this one as an example so just creating like a grid effect stagger effect behind images and you can apply it to different elements um cool so let's see if we can get this working correctly um yeah because this is this is a weird not weird but a lot of a lot of div blocks so relative and i'm going to add a text block give it the class name text block because that's what we added before um i'm gonna make it visible set it to sign all right i was gonna say learn more then for this button wrapper let's set it the grid link block needs to be positioned absolute and full and the button wrapper is going to be positioned center center this text blocks needs to be absolute and full oh that's fun okay right so this needs to be removed from here and then this needs to be 300 by 100 okay let me preview this for a sec text block absolute grid link block absolute oh wait point wrapper flex center center text block so i might have to add a dip block yeah 10 oh i see i still have another row to go that's why do we oh no wait one two three four five six seven eight nine ten eleven okay that's too many what's it doing i should only have ten rows okay kind of forewarned that it could get a little bit strange with so many one two three four five six seven eight nine ten so i want to delete okay all right oh yeah because it has padding do we okay remove that and now our text block should work yep perfect text block we say learn more and button wrapper there we go learn more set it to white and we'll give it a background color of red actually for the grid the button square let's set the opacity to oops not that button square and set it to 100 cool and we'll set this to this color no that's not going to work all right we'll just leave it like that so these are these are just full um they don't have a border these these grids so we have 300 blocks that we're going to animate let me call this button text all right so let's look here we have the grid link block and then the button square so let's go into the code and the wrapper is called grid link block and we'll say button square and the grid is 30 by 10. so the last thing we're going to do is try to animate it on hover that should be interesting whoa that might be my new favorite button no lie that might be my new favorite button that i've made i might create an interaction on this because that's just super cool um geeking out again 22. let me change the text to something like this and make it even bolder extra bold no bold whoa that was amazing you know what wait a second yeah yo i'm freaking out over this i hope it comes out good on on the live stream because it looks so smooth on my screen what's on the menu today yeah just cool animations let me try something else this might be interesting right because the contrast with this white background didn't work too well but what if we make the text white and we make the background color of the link block black or kind of a darker color hey what's up ui ux i wonder if it works on mobile too great question i'll test that oh no why isn't the background dark oh because i said the text color to black doi not the text color the background okay one more time okay the last thing i'll try to do is make this animation work on hover oh that would be super smooth if we got it to work on hover which i think we can whoa oh my god yo that is just so cool even if it's not on hover but on hover it might it might even be cooler but i'm going to share this is going to be cloneable and you can just see for yourself like this is super cool uh okay so let's try to do it on hover so what we got to do is go into the code here and initially i want it paused so all we have to do this should be fairly simple is [Music] so we'll say yeah we'll create a constant document constant button and we'll target the grid link block and we'll say um we'll say say button add event listener on mouse over we're going to let's go into here and let's look at the controls we're going to do animation play so i have to give this a variable so i'll say variable animation equals that and then here all we have to do is go boom animation dot play and close the curly brackets i think that's it animation.play and i think i have to add some brackets here yeah and close it here um yeah i think that's it so i want this to initially be paused so how do i pause it give me something good here anime.js is there a pause function there must be uh controls play pause so it's animation.pause so what i just do that or just say animation dot pause and then we don't want it to be looped fingers crossed no so it's not paused yeah it's not working dope console here at event listener listeners not a function oh okay so if the live stream goes over an hour then oh wait did i forget something here no constant button is it mouse over yeah mouse over let's see huh just looking at the code here mouse over add event listener what was the arrow we got add event listener is not a function so it's not liking that oh and i'm not supposed to write animation play select there huh play pause demo mission play all right i might have to spend some time with this play pause demo eo okay alternate move true okay auto play false let's let's add that let's say auto play false that's what we need okay so add event listener grid link block that should be good but in that event listener so probably messing up some code here i think we need those those closing brackets let's try it i'll try the click function you should select query selector instead of yeah that's god you read my mind eunice that was going to be my next attempt we should start an agency together eunice you're smart um no i'm kidding i i don't want to start an agency right now but uh yeah query selector um yeah cool yeah i think that should do it i think i do need the parentheses i think eunice does have an agency you you from the sites you sent it seems like you you do have uh or query selector id yeah um let me try this last bit here if this doesn't work i might give up here for a second let me do on click just to no not on click click just to see if i can get this remotely working oh oh my god that's silly okay so this button text is covering the link block wait no the button text is inside the link block uh okay let's see if we get an error ident unidentified unexpected identifier so yeah we're not targeting the code correctly z index yeah so let's let's do let's just try button text constant select there document query selector button text add event listener click yeah this definitely needs the parentheses everything's closed constant button animation so we don't need this if this doesn't work i'm gonna end the live stream a little bit uh early son of a unexpected identifier where give me the information here so the constant button we selected the button text yeah button at event listener click animation dot play do i need that here i don't think i would need that there button that event listener animation.play you know what i don't know why i'm messing with this so much let me just copy the code here because i was trying to use my own type of code and we'll just do that and now this should be grid link block if this doesn't work i'm going to lose it no i'm not it's not worth it it's not worth it comma before autoplay oh snap it's always that it's always the little things yeah blink that happens to me more often than i'd like to admit where i miss uh i think earlier when i was working with anime yeah i missed the uh the closing bracket on script and okay so i get no area so it must be button text we must be targeting the button text yay we did it oh we did it okay now we want on hover all right so yeah that happens if exactly eunice exactly so yeah let me use the code that i initially wanted to use wait what's what's the would it be mouseover or just i just have to change it to mouse over right oh it would be on mouse over on mouse over yeah on it would be on mouse over so it's not going to work right now well thanks for your patience everyone that was hover wasn't it it would need to be on mouse over okay on maps over on mouse over please work please work yay love it we did it um so for this button text why do i have it set to absolute i don't know yeah so here let me do this grid link block and then let's link this out to web webdav for you oh thanks for your patience everyone that was a bit it's always the commas the little the little codes i'm definitely going to create uh just an interaction video on this because i i think this button is just too cool to not just create a specific video on it okay webflow doesn't like that i'm publishing so much okay let's try this again reload i hope it saved check out my code yep all right i'll just finish publishing this then we'll recap and then we'll end it for today boom awesome that looks good the only thing i don't like is that when i hover over learn more yeah yeah okay i know how i would have to do this so good link block button text okay so ideally we would put the link block and the button text we would just make this a div block and we would put both of these in a link block that way when we hover over the text it's still clickable but the button does work you know it takes me to web depth for you except when we hover over this text we have to hover around the text to make it work but yeah that was cool yeah feel free manuel i'll just do a quick recap we built this with anime let me set this back to center i actually like it animating from the center more save and i will swap out the image on the second demo so this is going to be cloneable everyone so you can just go in and clone it but i do want to swap out this image to let's do let's do this one i would resize this image actually let me resize it yeah feel free to drop out everyone because i went over one o'clock trying not to do that but it was just too fun today uh yeah i'll check that out the no code um website in one second i just want to change this up here and i'm going to grab the color for this and grab it from here or maybe here yep set it to 10 and we'll set the border to that color we'll set this border to this color there we go how about the text oh that's dope yay i like those colors actually that's really nice all right cool so this will be the demo i like that that looks a bit nicer yeah okay someone will write uh on the no code conform say do you have any idea how they did the structure on top of all the content so webflow no code conference okay do you need to do the structure on top of all the content do you mean like that great excuse me that grainy effect meanwhile do you have any idea i'm not sure what you mean manuel hey danielle yeah daniel sorry um yeah thanks i do these every monday through thursday from 12 p.m to 1 p.m central um yeah i'm having let me try to understand what you mean manuel how they did the structure on top of all the content you mean that you mean the grain effect it's the grain effect okay yeah the grain effect i'm sure it's probably like css there is i think there's css to help you get that grainy effect we can check it out um i don't know if i'll find it here but see if there's any custom styling yeah i can cover that in a live stream manuel that grain effect but they probably just applied it to the body or something or yeah there's there's some css grain effect animated grainy texture um grainy gradients noise filter that's for svg yeah i'll cover this in a live stream and all um it's probably just a piece of code or something like that uh yes but how can you put it on top of everything without blocking all the content yeah that's a good question that's a very good question i'm guessing it's applied to the body maybe um see it's green effect to body yeah that's a good question manuel yeah because everything has that green effect wow that is pretty impressive because the text doesn't have the grain effect everything else does okay that's going to be a good thing to look at so dylan and i have the screen on my site the green is just a transparent svg between the background and the content okay but it's on top of everything so it cannot be the body yeah that i see what manuel is saying so yeah we'll look into that this live stream has gone quite a bit over but that's something we're going to be looking at in another live stream but yeah we'll look at it how about tomorrow manuel i'll spend some time with it and research it and then we'll we'll take a look uh awesome empathy clonable okay so dylan has a clonable project that has a grain awesome so let's go to webflow showcase which one is it empathy clonable by let's see grain green effect yeah we'll figure it out all right uh thanks everyone uh dylan just let me know tomorrow okay cool um yeah we'll we'll take a look at all this tomorrow and um yeah we'll have fun with the green effect all right everyone have a great rest of the day have fun building in webflow tell everyone about these live streams the more i do them the more i enjoy them the more i want to share this information and the more i want to get users to webflow and help them reduce their website pain points because webflow is amazing so definitely want to keep sharing webflow so yeah thanks for joining thanks for your input eunice thank you manuel thank you you guys always have great stuff everyone here dylan killa pablo thank you for joining you guys offer so much valuable info and it's just great to to have you guys here almost every day um which is amazing and yeah we're going to be pretty proficient in webflow i think doing these live streams every day uh so thanks everyone have yeah have a great day rest of the day and i'll see you tomorrow thank you

Channel: WebDev For You

Views: 711

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design, anime.js, anime.js and webflow, staggered animations, staggered animations in webflow, webflow grid, staggered grid animations

Id: CNtK1ND8NGs

Length: 78min 35sec (4715 seconds)

Published: Wed Oct 13 2021