Creating Awesome Scroll Animations with Framer

Key Takeaways

what is up everybody Gary Simon here and let me just ask you a question let's take a look at this design right here do you think you can implement this design with HTML CSS and JavaScript well chances are most of you probably wouldn't be able to do that because it requires a good understanding of JavaScript fortunately if you want to deal with this in a not to L code way we have tools like framer so framer allows you to build something like this from scratch without having to touch any code and that's what I'm going to be sharing with you today how exactly to make this particular little interaction animation I within framer and this is a lesson video that I just finished from my upcoming course from figma to framer which you can take right now even though I'm still developing it and you can take it for a massive discount so definitely check out the top link here in the YouTube description or wherever you're watching this so let's get started welcome to this brand new lesson where we're going to do this all right looks pretty boring doesn't it but it's just kind of like an interesting little section that you might find on a hero uh not a hero section but a landing page maybe for somebody who has social media accounts right or a business and instead of just you know them scrolling down and getting to this point without any interactions or animations we're going to make this highly interactive and animated to make it really fun um and in order to do this stuff through code you would have to understand JavaScript you would have to understand cssh you'd have to understand a lot in order to pull it off like what we're about to do um so this is going to be the most involved project so far to this point in this course um but it's so fun it is so fun and just I haven't Ed framer for extremely long time but in discovering you these abilities that would otherwise take you a long time to code it is so exciting because you can now just be a designer and not just design stuff in figma and then hand it off to a developer you can now do this stuff all yourself all the way from the design conception figma to the fully realized product in the browser and on devices yourself okay so let's go ahead and let's just say say in we want we want to have a rough idea of how we want this to animate right not everything needs to have animation but for some let's just say for instance for a fun way um to present this UI right here when a person Scrolls down we're going to assume that this is at the like bottom or a middle portion of a landing page then we'll have let's say this will come from nowhere and kind of just fall into place like a little spring animation and these will do the same thing as well these other four um but there'll be a stagger on them and then additionally maybe this will be slowly rotating in the background and additionally We'll add a a a custom cursor hover effect on this where it will display and animate um the person's I I guess you could say their handle on each respective platform so we've got our work cut out for us but you're going to be so excited if you never dealt with this before because it just opens up a world of possibilities without having know all of that code and what it would take to create it so let's go ahead and the first thing we're going to do is just grab the fill I have a new document open here and I'm going to close this one out and we are going to specify that color code here in the browser and then we'll give this a layout and initially I'm just going to put a frame at the top kind of like pretty pretty pretty pretty uh large like 730 or so pixels I'm going to get rid of the fill I'm going to take the type tool and just type in uh scroll down there we go and we don't want position absolute for that uh we want to add layout to this there we go and then we also want to increase the size of this type so I'll just come down here increase that size and maybe we'll make it bold for the fun of it okay so there's our scroll position next up let's go back to figma and we are going to let's see here we're going to grab now there was When I Was preparing this project which is what I do I I created already in framer before creating to make sure there's no hiccups um notice that we have a frame I'm going to ungroup this because it did not not properly import when I went to do it um so what it is it's just two different separate layers right now the these are not grouped they're not even an auto layout when I was adding this in Auto layout which is what I normally would do it was not properly importing into framer so let me just show you if I I if I go ahead to plugins and go here we'll go back to I framer I'm just going to paste that right there we go back to layers you can see how it says frame five and we could scale it up and down and it works but we don't really have access at this point in time to the individual layers inside of it unless we double click right here physically and we get access to frame five in the stack here um so what I'm going to do instead is I'm going to go ahead and grab our frame five right here and I'm going to come out back to figma ungroup those and then just take those separately we'll copy the I element with our plug-in and then now what I can do is we could take the ellipse and we have our little Instagram logo and we can put that right inside of it but we can choose this and add a layout as soon as we add layout It Centers it automatically and now it's it's working as we want it to so sometimes little quirks like that may occur right here is about a good size I would say okay now another thing we want to make this a component because it's a repeating pattern right so this is they're all the same except obviously we have different icons in the middle so if we're going to create a component with component variance which we would need for each of these uh you know four elements then we need to also right click and use our figment HTML plugin and we will go back to our browser here and notice where you just make sure you have the ellipse one selected I'm going to rename this we'll just call this I social media container and I'm going to paste so now we have two of them but here's the thing we're just going to hide this one so right click and hide it there now we have access to it when we go to create this component so we'll go back we'll do the same thing real quick with this one all right let's go ahead and hide that and then finally we'll do it one more time and we will copy that okay great so we'll go back paste hide good to go now at this point is when we can go ahead and take this whole thing social media container right click create component all right so now we have our our very first one called variant one um we'll call this one IG for Instagram and before we create the variance I want to create a hover state for this one so we're going to create hover and what is it that we want to change when this is hovered well we can rotate this I think that might be cool yeah let's rotate it that way so if I hold shift we'll just rotate it 15° you can see it gives you kind of a a quick axis uh access point so every 15 deges so I think uh you don't want to R rot it too much I think 15° is good and that's what we'll do with the rest of them you can even make maybe make it a little bit smaller or you can make it a little bit bigger up to you okay so if we go look at this and hit play there we go not too much is happening it's not all that exciting of of an interaction but just just just hang on it's going to get a lot funner so I'm going to double click this we're going to create another variant and we another one and then another one all righty so now what we do is we hide this one so hide and then we're going to show LinkedIn right click and show we add our variant hover rather that's not a variant it's just a hover and what we could do with this one same thing shift so we're at 15 degrees I increase that size if this is 60 and 59 I just slightly okay we'll do the same thing with this one hover hold shift rep 15 slightly increase it oh oopsie I I did the wrong one let me delete that there we go okay so we need to hide I forgot to hide the uh original Instagram one so let's just go ahead and hide this one and then we're going to show X so we'll show that there we go so now we can add the hover make it slightly larger this one will hide this and then we'll show Tik Tok show and add a hover there we go okay so the last thing we want to do is rename these variants so this is LinkedIn this one one will be Tik Tok I'm just double clicking the I change that variant five will be X great so now let's um wrap a stack around this because we're going to have um four of them side by side so all you have to do is right click over here and add stack select our original component duplicate it contr d contr d contr d we don't see it because the parent element um should be changed to fit content look at that give ourselves a little bit of space and then now we can go ahead and start changing these variants so we come over here over here we change this to LinkedIn sorry but my phone needs to be silenced and there we go so now if we go ahead and hit play look at that we're just getting started folks it's not that exciting just yet okay so we have this simple you know hover stuff we I really haven't shown you anything that you don't already know about um for the most part um and but what I want to do is wrap all this this element inside of another frame so that we can get it centered in its own container area so I'm just going to hit F wrap it around maybe somewhere right around this tall and then add a layout and that way we'll get it centered up let's hide this okay so now we have this stack right here and I guess we can just call this an overall section called uh social media okay and then we'll just call this I social stack okay so now let's work on the part where when we scroll down we get each one of these El these these one of these four you know icons to kind of fall into place and we'll start here with the first one and what's really cool is we can just copy all the work we do and paste it onto these and that way we don't have to do and set this up from scratch for each one so the first thing we're going to do is I want to Define what's called a scroll section so for instance if I come down you'll see scroll section and if you click on the little info icon you can watch a video to specifically I show you how to scroll to smoothly scroll to a specific section within your page that's not the only reason you might want to have a scroll section though and you'll see why in a bit but first let's just get this created and I'm going to give this a section name of social all right so nothing changes but just understand when you when you add that you'll see this little icon it is a scroll section and it's called social okay just just remember that now the next thing I going to do is I want to take a social stack and because I want these to come from up here and you I want people to be able to see them outside of this stack we have to make sure that overflow is visible on the paring container now here's where the fun stuff stuff starts to happen we're going to go ahead and select our first social media icon and this one we're going to click on effects all right now you might be wondering which one do I choose here now we're going to we're going to experiment obviously with all these but scroll we have a lot of options here so scroll animation we're going to click that and when we have that selected we want to Target I specifically speaking the section in view so the section means we have to specify the one that we created if you didn't create that this won't show up it'll just I choose so what this is basically saying is I when this section is in view meaning when the person Scrolls down then and we call this the viewport when it's view in the viewport which is what this property is then then I want you to animate this element now it gives you three different positions in which you can um start to animate elements that are found you know within or when this section becomes in view um it's basically when the top of the section in this case right here reaches reaches the bottom of the viewport like when you're SC scrolling or it's when it when it reaches the center or opposite at the bottom so where the bottom meet meets the top of the viewport if that makes sense I'm just going to leave it here in the center and you can also choose um to have replay on or off and you'll see what that means um and then you have presets here and this one by default is just on fade in so if I hit play notice how when we got I we scrolled right to the middle of the section it just shows up in replay means it's going to keep on doing it every time if you don't want that we just say no for replay it'll only happen once see very powerful this is stuff you you create um if you know a little bit about coding with green sock animation platform in their scroll trigger plug-in um but this which great we have a UI we don't have to right code um so we're going to say yes on replay though and we can see we have this the um the presets if one of the presets works for what you want like flip vertical like what does that look like okay that's what that looks like that's pretty cool then you don't have to do anymore however if you want to customize them then you can so let's say what's slide in top that kind of sounds like what we want right oh oo that actually is pretty close to what we want so that's interesting well let's go ahead and say okay we let's fine-tune this more so let's click on enter and we can see it's already taking the opacity to zero for to zero I'm going to leave it at uh 1 and then my y offset I want it to come from up here from the top so if I increase this value maybe I just type in 3.99 there we go and we go all the way to where it's just hidden there we go there that now watch what happens when we come down oh look at that and it has this cool kind of like spring animation you notice how like it comes down it's like yeah I like that but I want to I want to accentuate that a little bit more or emphasize that so if we click on Spring you can kind of increase this I the damping effect there we go just play around with them have fun watch this oh Isn't that cool who and our hover effects still work okay so let's say also we want this whole thing to scale down slightly when we hover over it so you can have a hover within the component like we did here but you can also bake in a hover right here as well so we can add effects hover and over here it's already grown it for us but we don't want we want to go the opposite direction like9 or maybe 08 opacity will stay the same everything else will stay the same and let's just see what this looks like now so we're going to scroll down that is so cool all right now these ones don't have that yet because we haven't applied that hover animation okay now the final thing before we we do the sequence animation on each one of these and we replicate things and we adjust the delay I is to add a custom cursor which I don't think we've tackled just yet but it's super easy let's say for instance when somebody hovers over these you want a little popup that follows the cursor that shows the uh the person's handle on each respective social media Network how would you do that all right here's how so I'm just going to take a type tool hit T I'm just going to click anywhere here and I'm going to type in at designour com and that's that might be my Instagram handle I don't not big on Instagram whatever so I'm also going to make this just for now absolute because I just want to position it here roughly around where it's going to be you know around around here whatever and I'm going to make this a lot smaller like we're going to go real small like size 12 okay then I'm going to H hit I want this to be wrapped around a white pill-shaped container or a pill it will be inside of a white pill-shaped container because no one's going to be able to see this if you're hovering over here on these black icons so this is just for readability so hit F drag a circle around it or a rectangle rather and I'm going to take this and just make it a pill shape we're going to make it white okay and then we're going to take frame and we're going to add a layout great and so now if we type oh notice how it's not changing shape we want to change this to fit content and then add a little bit of padding as well so if we add padding there we go that looks pretty good so now when I start typing there we go then what we do the next step when you want to have a custom cursor like this cuz this is going to follow the cursor around it's not really a custom cursor it's just following the default cursor you could replace the cursor entirely with this and I'll show you how to do it I wouldn't do that though and I'll tell you why but anyways let's say we have this we're ready to go we're going to make a component out of it well actually let's say we're not ready because I understand that I want to have this animate when it shows up um and it's going to kind of like animate into place there's a way to do it manually and then way a much better way I was going to show you the manual way but let's I'm going to hold off on that and I'll show you what I'm talking about here in a second so first we're going to right click and create component and we'll just call this a social tag all right so what we're going to do is we are going to create a um not a not a variant you would think you might have to to to make this anime up from nowhere but really if we just grab the text we could see that we have effects in here and on appear which is what we want to happen when it appears this white tag appears and it only appears when somebody hovers over one of those black elements or those icons so what we could do is we just have a here fade in how about slide in bottom or slide in top well let's see if we just hit play and reload it you could see it's it's basically doing exactly what I want this is what I want so now I has animation just by adding a little appear effect all right so now what we do is we can just delete this don't worry it's still in our assets right here so what we can do is we select this and then we come over to cursor we click plus and we're going to choose custom cursor so what's cool is like there's um there's a bunch of cursors you can select here that you know you can quickly just change the cursor too we're not going to do that one so let's uh just delete that and let's add a custom component cursor we're going to select our social tag and notice remember I mentioned you can either make it replace this cursor that you see here moving on top of your screen or follow it we're going to follow it and what's cool is when you change this to follow you can change the offset um in terms of the X and Y value of where that little tag is going to show up in relation to the cursor that's hovered over these elements okay so I know it's probably going to need to go down further but you can experiment you know with this yourself so let's just go ahead and see what happens because we've just added that on the first element look at that I don't know about you but I think that's very cool sometimes if you get hovered right on the edge that might be an issue but most people you know they're just hovering over I love that okay so we have that now and now what we can do is oh and by the way let me show you when we change this to replace what that actually does so if we come down here it's just going to replace the cursor it kind of feels weird I mean I suppose you could do that if you wanted to but me personally I would keep the default cursor and just do a follow now if you want to replace the cursor with just a little dot that's one thing but I wouldn't have it like be text and stuff like we had shown so this is going to be a follow and I like uh the the the offset and all this stuff you can actually add a transition right here um and it's just going to be a spring based transition so we see what that actually does so it really doesn't seem to do much of anything it kind of okay so it actually does so if you hover over over this notice how like it slowly kind of it takes a while to catch up and then it slows down that's what that does so if I go back to hover and I we take this and oh interesting okay let me make sure I'm oh I'm sorry I was on the wrong element the cursor and you change you take that off you'll see it's very quick it follows every single movement if you want to have that nice flowing smooth uh sort of Animation add the spring animation so look at that oh that's so nice okay so now guess what we're going to take our effects here and like our hover effect for instance and I'm going to add that onto each one of these so we go to um effects right click and paste all all right so now they have that effect but only this one has that okay so next up we're going to go back here we also have the scroll animation so we're going to right click and copy that I'm going to to select these right click up here and hit paste now what's going to happen is they're not going to be a stagger sequence animation they're all going to come in at the same time I don't like that but let's hit play anyhow oh oh no it did not work now in this case let's see what's happening here so if we click on animation oh that's right I forgot about this little issue um whenever you paste these for some reason at the time of recording they may fix this the section does not get um transferred so let's just choose social for all three of those now they all fall in okay so now we just need to create a delay offset basically for each one of these so if I click on scroll we go to enter and transition we can add a point yeah 0.1 second delay right here if you click the second one fortunately it it keeps the same panel open we'll create a 2 second delay and then we'll create a 3 second delay there now watch this is that not cool okay we're we're just about done and let me show you another thing if we take this whole section up here take this whole section copy it select up here paste it it'll go at the bottom we can double click this and change this to scroll up is when we hit play We scroll down we see them all we scroll back up guess what it does the same thing it replays it so it's very cool very powerful effect very nice and snazzy so now there's another issue though when we want to do the the custom cursor the web cursor so just right click and copy this take these three we will take the cursor right click and paste on it we should have cursors here for all of them yay but what if on LinkedIn my handle is different than over here on Instagram how do you fix that how do we customize that text I'm going to show you how well we simply go back and we go to our assets we click on social tag and we simply add a variant for each one I'm not going to add all four variants because this is fictional but I'll just show you one other variant and then you'll figure out how to do the rest so let's say for LinkedIn or whatever it might be DCC I don't know DCC or something like that all right so and then we'll rename our variant so that we know which one we're adjusting go to layers variant two we'll just call this uh link and then this variant um what was the first one IG I think okay so now if we go over here when there's a variant attached to this component you'll see um if we click on social tag uh for a cursor we can choose LinkedIn so we hit play there's DCC and then here's design course Comm look how powerful that is that's so awesome okay so now that we have this ready one final thing that we needed to do based on our figma project file is this big thing in the background which this is simple we're just going to create a very simple Loop animation where it's just slowly rotates so um let's start off like in this rotation right click we're going to copy this we're going to go back we'll just select the overall container here and we're going to make this absolute we're going to change the zindex to zero but also position it above our social stack here we go okay so this is looking pretty good maybe I'll make it smaller slightly and then now what I want to do is we're going to create a uh let's see here oh so we sometimes you might not have the option to create like an effect if that's the case like in the case of this graphic you just right click and you choose add frame so the frame itself is still absolute and so is the element inside of it so it'll work so we click on the frame guess what now we have access to our effects so we can just do a loop because I just want this always rotating and it already has it rotating and if I hit play it's way too fast that's going to make you it's going to make people vomit so what we really want to do is click on this Loop effect and we want to adjust under transition that's where we have access to the to the length the time how long it takes for it to do one full rotation let's do 35 seconds I know that sounds crazy but you want this to be very minimal movement look at that and that's just perfect in my opinion and look how cool this interaction is it's just so nice and smooth it may not be smooth on the video here because of the frame rate but when you're I'm playing as on my computer it's as fast as it can be and it's just s such a fun joy to use a UI like this it's just so fun um so hopefully you're starting to see the power of framer especially in relation to interactivity and animation but we're still only scratching the service we have a lot more to learn let's continue on now did you enjoy that I know I did so if you want to learn more about framer you could take my upcoming course from figma to framer right now and you can take it for a discounted price because it's currently in development it should be finished in about a month or two and yeah let's start letting framer check out the link see you soon bye [Music]