5 Tricks For Epic Hero Animations (Framer Tutorial)

in this video you will learn the 5 tricks I use to create this captivating hero section inside of framer if you want to follow along as always check the working file Link in the description below now the easiest way to make a hero section look amazing is by finding great visuals as the notorious con man I am for this one I used mid-journey to help me create an incredible Avatar looking wallpaper however getting the image is just the first step which brings us to the first trick to achieve this cool zooming effect used in the intro we need to separate the character from the background so the first thing we do is to import our image into Photoshop once our image is imported we're just gonna take one of the selection tools here and I'm gonna use object selection tool I'm gonna select this whole object here once fully selected I'm gonna go to select and mask I'm gonna go down here and output it to a new layer hit okay and now as you can see we have those two as separate layers the next step is to highlight our original image in the layers panel and use the content aware remove tool now we're going to fill out the area that we want to remove so I'm gonna just do this uh this is hard with the track pad once filled out I'm gonna hit generative fill and I'm gonna say remove even though they suggest you don't say things like that I'm just gonna say it once that's done make sure that we hide the layer on top with the hero image and here we have a pretty cool background we can change between the alternative see what looks best uh I think this one looks best now we're gonna go and Export these layers so I'm gonna take the foreground here let's hide everything else I'm gonna go and quick export as PNG call it hero image one very original then I'm gonna hide that I'm gonna take these two so the generative fill one and the original hero image I'm gonna merge them let's see here right click when I have both targeted merge layers and once that's done right click quick export as PNG hero image two super original now I've exported my images into framer I'm gonna place the character on top here make sure that it doesn't end up inside of that background image then I'm gonna select them both add a frame call it hero once that's done I'm gonna drag it into my view with the hero selected I'm gonna go to width and set it to fill now it will fill out the entire canvas and what we want to make sure here is that our hero image 2 or the background is actually pinned to all sides so that it scales responsibly for this case though we're not going to have zero in all edges we're going to use minus 150. this will make sure that our Zoom effect later is going to look good but you'll see more on this soon now if we try to resize this you will see that it's responsive because we pinned it how nice is that I'll go to our hero again and I'll set the old height to 100 in VH this will make sure that this section always covers one full screen height for the visitor regardless if they're using a huge monitor or a just a small mobile device since this character is going to grow into view as we enter the page I'm gonna slide him down a bit like this now we want to add zooms to our images as we load the page so I'll select the background image I'll go to effects up here then I click on effect set opacity to 1 and scale to 0.85 now since the image stretches 150 pixels outside of the view on each side it still covers the full screen at 85 in size or scale 0.85 we'll then click on transition here on Spring go to the east tab and set the duration or the time to 2 seconds now if we hit play you can see that we have this slight zoom in effect for the background I'll hit escape and go back in your left sidebar you can see all the animations on your canvas by looking for this icon so I'm going to go to the background here with this animation and I'm gonna right click on this effects here or this effect I'm going to copy it I'm then going to select my blue little gentleman here right click him go to paste and paste effects now if we play it again we have this zoom in on both so both the character and the background and by the way in my upcoming framework course I'll show exactly how to make full websites like this one so if that sounds interesting sign up to the wait list in the link down below okay so time for the second trick and this one elevates everything do you remember the cool little sparkles from the intro that's a component we can find at framer.supply so we'll head to framer.supply I'm gonna scroll down until I see this the particles component I'm going to hit copy I'm gonna head back to our project I'm going to paste it in now keep in mind that you need to change the ID down here on this component for every instance that you add to your page so if you have more than one change the ID otherwise they might just start fighting with each other and you're not going to see any of them so I'm going to change this to Avatar hero because I already have the effect in the view here to the left I'm going to scroll to the top go to backdrop change that to zero percent in opacity and you can see that the black backdrop just disappeared I'm gonna place it inside of the background image and then I'm gonna go to the pins here pin it to all sides and change it to zero for all sides this will make sure that it always stays pinned to the image so it scales responsibly with our background image now if we hit play you can see that we have these amazing Sparkles that even move on our Mouse hover now trick number three is great for big bold text let's hit T and create a text field saying enter I'll scale it up in size move it a bit I'll make it white by heading to the right sidebar changing the color then I'll head to Styles hit plus blending I'm going to change the blending to Overlay now it doesn't look as cool yet because we need to change to a cooler font and I have this cool custom font that I'm using toric SC and as a last little detail I'm going to add a shadow I'll change the y-axis to four blur to 12 and we can even add some more strength to the shadow I'm gonna go to size here and change from pixels to fit this makes sure that your text size is always going to be according to the container it's in so right now it's covering a hundred percent of this container let's say that it should cover Maybe 75 if we want to change the container since this one is a minus 150 pixels outside of the frame meaning that the text also goes outside of the frame we can just place it here in this section instead now if it doesn't immediately go back to its normal size we can just resize it like this and then go to size again and change it to a hundred percent which brings us to trick number four using lotties for the scroll animation icon I'm gonna go to insert search for Lottie and I'm gonna use the Lottie component and the dot Lottie component with this you can paste any Lottie host file into this URL here and I happen to have one with a scrolling Mouse so I'm gonna take that one and I'm gonna go in here and paste it and there we have it change this backdrop to zero percent in opacity I'm gonna scale it down a bit what is it here zoom in create a text field writing something mystery us like that change the size something smaller zoom in drag it over here change to a different font on web not custom I'll take Rubik maybe even smaller than that 14. that looks cool I'm going to select them both right click add frame remove the background fill I'm gonna go back in here drag it into our frame now as you can see it ended up inside of this hero image I don't want that so I'm gonna drag it outside put it on top and I'm gonna Center it I'm actually gonna make it into a layout gonna set the height to be fit content and now that I did that I can change the Gap here we'll change it to 20. and now I'll go up a bit maybe I'll change the actual pinning here 48 pixels from the bottom now with that done why don't we bring in the logo type you're gonna have to excuse the noise in the background um but I'm gonna pick a logo type an SVG drag it into our working file here uploading it I'm gonna resize it a bit make it a bit bigger I'm gonna drag it into our hero section gonna make sure that it's not within the background it's gonna be on top here and I'm gonna pin it 48 pixels to the top make sure that it's centered I'm also going to make sure that this little fella here is on top of the text so that the text appears to be in the Horizon now if we hit play it's starting to look like something however my friends now it's time for the final animations that puts it all together we're going to make this logo appear from the top well this humongous text field here and the scroll indicator down here appears from the bottom all of them with slight delays and if your Lottie turns invisible for some reason don't worry I don't know what the reason is but it's just a bug if you play it it's still going to be here now let's start with the logo I will select it or go down to effects appear and change it to slide in top this will make it travel less of a distance when animating making it a bit smoother although this is really quick still so we're gonna fix that in just a moment I'll go back into the animation effect transition I'm gonna add a delay of 2.5 seconds I'm gonna change the mass to before so it's a bit heavier I'm gonna increase the damping so that it smoothens out and I'm gonna change the stiffness to 300. I'll exit it or go to the effect right click and copy I'm gonna go to the bottom stack select it go and paste the effects and I'll scroll down to the effect here click on it go into effect and change from -60 to 60 because this one we want to come from the bottom instead of the top and we're going to go back to transition and we're going to change the delay to three seconds instead of 2.5 seconds this way it animates 0.5 seconds after the logo and now the grand finale [Music] the humongous text I'll go back to this copy the effect Target or select our humongous text right click paste paste effects I'm gonna go into the effect s and the offset here is gonna have to be much more but it's still going to come from the bottom so it will be a positive value I'll set 500 I'll head into the transition change the delay to two seconds the damping to 80 so a bit more damping which will make it show before the logo and the bottom stack and land a bit smoother if we play it ladies and gentlemen we have our hero section if you're hungry for more check out my master framer playlist here on YouTube or go to timgabe.com slash framer Dash course to join the wait list for my upcoming course until the next one have a great life

Channel: Tim Gabe

Views: 4,817

Keywords: ui, ux, product design, ui design, ux design, framer, framer tutorial, framer hero section, framer animation tutorial, framer animation examples, framer animation template, framer animation website, framer appear animation, framer scroll

Id: m2NXQjKPUrg

Length: 14min 49sec (889 seconds)

Published: Thu Oct 05 2023