How To Create Scrollbar Animation On Figma

in this tutorial you'll learn how to create a scroll bar animation that looks like this on the left i have the content and on the right i have the scroll bar so when i click on the scroll bar and i scroll down you can see that it's scrolling down i leave it there it sticks scroll bar i pull it up it's gonna stick at the top right but without further ado let me just get straight to uh how you go about actually building this on figma by creating a really long uh paragraph all right so let me just give you the title first um sum title and that's for the description instead of 24px i'm going to change it to 16px for the descriptions i'm going to use the lorem gibson so i'm going to use a plugin over here so right click plugins find more plugins i'm using this click run uh type in amount of words or sentence paragraphs you would like so let me say i don't know let's say two two two um paragraph right i'll select paragraph so it has created two paragraphs for me okay this is really long so uh let me just make it squashed a little bit all right this is a really long text all right so now i have a title and i have the description a super long description select the title and the description right click add auto layout for the spacing between the items let's change it to 16 px for the paddings i'm going to give it 16 16 on all sides give it a white feel so let's just call this frame content all right the next thing that i want to do is to create this scroll bar so i'm going to use a rectangle rectangle just draw a scroll bar change the border radius to 100 right click add auto layout for the uh wrapper for the screw bar give it a light gray feel as for the scroll by itself i'm gonna give it a darker gray okay just to make it more obvious okay for the paddings of the scrollbar wrapper i'm gonna change it to apx by apx okay great so now that we have the content and the scroll bar i will start to add in a frame that you know just to showcase how it works so in this case i'm going to start to actually i don't even need to use any of this because since i'm just going to be doing the demonstrations i'm just going to be drawing something of uh you know any dimension any proportions just to showcase how it works i can just draw a frame let's just call this showcase container i'm gonna bring in my content bring it up a little and i'm gonna bring in my scroll bar for my content and my scroll bar uh right click on both of them and add auto layout so let me just drag this auto layout to fill the entire width as for the content i'm gonna use a few containers for the width i think there's a too much spacing [Music] for the body so let me just change it from 55 to zero right for the content description change the width to fill container all right great and for the scroll bar i'm gonna change it to field container first and oh i realized that this is a little bit too long so let me just do a command z or ctrl z if you are on windows and i'm going to change the i'm going to give the content this is the content which is the left hand side right click on the content and do a frame selection give it a frame all right so let me call this a content wrapper for the content wrapper i will make the height of the content wrapper to be the same as the showcase a container height so in this case let me see what is the showcase container height it is a 304 so for the content wrapper i'm gonna change the height to 304 as well okay just to make sure that the content wrapper is indeed the same height i just need to check that this three zero four and showcase containers three zero four okay so that's correct that's great okay and the next thing that we need to do is to change the scroll bar height to fill the container now the next thing that i'll be doing these are just the details i would like to have the scroll bar to reflect the uh sort of like the correct proportion uh relative to the total height of the content itself like how much am i viewing as compared to how much is the total content that i'm supposed to give i don't know whether that makes sense but let me just show you so i will go back into the content i can see that the height of the content is one one zero three and if i were to go back to the scroll by itself let me just change the scroll bar height to a field container i realized that the scroll bar is 2 2 2 8 8 right and the current content that i'm viewing is three zero four so i will have to [Music] multiply the height of 288 by 3 0 4 over 1 1 0 3 so let me just do that i'm going to change the scroll bar from a height from field container to fixed height 288 multiplied by 304 um over oh my goodness i kind of forget what is it okay let me just write it down so it is one one zero three and the height of the scroll bar is two eight eight okay so two eight eight oops sorry i shouldn't use uh 288 over here i should be using the height of the showcase container which is 304. let me go to the scroll bar again fix height 288 multiplied by 304 over 1103 okay now the next thing that we need to do is to create a component for this showcase container create container and add variant let me just change the property the the the key to be called i don't know let's say view for the one at the top i'm gonna change it to the top for the one bottom at the bottom i'm gonna change it to bottom okay now we're gonna see the second component the one right below all i have to do is to just move the content within the content wrapper move it all the way up all right just move it all the way up just slowly move it up okay okay i have moved it all the way up so right now i'm actually showing the content right at the bottom as for the scroll bar i'll just have to do a bottom center alignment click on it you realize that this scroll bar is dropped right to the bottom okay so the last thing that we need to do is to connect the scroll bar click on prototype connect the scroll bar to the bottom view and for the interactions instead of form click we're going to use on drag on drag change view to bottom animation is going to be smart animate do the same for the bottom connect to the top on drag uh smart animate as well all right so just to see that it works i'm gonna create a frame just to showcase the container itself um [Music] do i really need to actually let me just delete this first let me go to assets and find showcase container copy it here prototype flow starting point let's call this start here click on play let's hope that it works okay it looks a little bit small hold on for this show prototype i'm gonna do a custom size instead okay go to fill screen okay let me try to drag the scroll bar down you can see that i can start scrolling on this prototype so that's how you go about creating a scroll bar animations i understand the video is a little bit long but i just want to show you how to create it from start to finish so if you like more of such a video you know feel free to comment down below to let me know what are some of the things that you'd like to see see you the next video you

Channel: Product Meow

Views: 7,015

Keywords: scroll bar

Id: ExNKCdWcmuo

Length: 11min 49sec (709 seconds)

Published: Sat Aug 13 2022