Infinite scroll carousel | Figma Interactive Components

hi guys thank you for being interested in this  tutorial which we will show how to create an   infinite scroll meaning that that is an an endless  call if I can say it like that yes uh meaning that   it Scrolls and doesn't have a beginning or an end  when it reaches the end of these three images it   just keeps on scrolling in a smooth way and it  doesn't kind of like go back to the beginning so   that is the main idea of infinite scroll uh you  can see it here also on a mobile screen that the   difference between infinite scroll and a regular  horizontal scroll or a vertical one depends of   course what you need in your product um that here  for example as you have the scroll like in stories   in Facebook so you can just kind of like scroll it  horizontally uh very easy and this is very fairly   easy actually to create so so that's one way of  creating a horizontal scroll in this case and it's   just a frame here that has these elements that you  scroll it reaches to the end and that's basically   it so that is really easy to create now the  infinite scroll actually what it does I'm going to   show it on Swipe here is that I can scroll the one  two and then I get to the first one and it keeps   on scrolling uh in like that I mean it has an  infinite scroll and of course you can do it with   five six ten images as many as you need and that's  fine here I'm just giving an example with three or   four Images it's just like that so no problem with  that and clicking on this one I'm just gonna show   how it happens exactly like in the desktop it just  Scrolls um you know has an infinite scroll and it   Scrolls independently without us clicking or more  right to say in Mobile tapping on anything so this   is the infinite scroll enough showing let's get  to work okay so that's done with that and we're   done with that and let's go um I have here A  Simple Mobile screen and I have four Images   here and let's see exactly how to create this uh  infinite scroll I'm gonna show it by the way only   on mobile because on desktop honestly speaking  it happens exactly the same I mean the technique   and the logic is identical so I don't think that  there's a need to show both of them I'll just show   uh on mobile with swiping and with after delay  and then I think that you will get the hang of   it pretty easy okay so I have these four images  and I'm gonna duplicate let's make it with four   I mean like the infinite school I'm gonna  make it uh with four Images at this time   and I'm gonna just do uh yeah rectangle  one two three let's let's give them a   name actually rename them I'm gonna name  them actually like that just give it a   yeah that's okay so uh they're gonna be named  one two three four five good enough I'm gonna   right click and just make an auto layout I'm  adding an auto layout to them and uh give   them a zero space between them okay so we have  actually our images let's call them images and   uh we're gonna put all these images actually  in a frame okay uh right click frame selection   and then I'm gonna make this Frame actually  like that so this is going to be 375 basically   actually we don't need this one it's just lying  there doing nothing so you know what we'll tell   him bye bye yeah something like that and this  is going to be uh images plus uh pagination okay pagination now if I'm clicking the clip  content here so we're gonna see only the first   image and the other thing that we're going to  do uh this is going to be a component and you   know what let's give it pagination yeah you know  what we'll name them as as we create the variance   it doesn't matter right now and let's actually  uh create the these Circles of pagination sorry   uh we're gonna give them um  something like that I guess   yeah 10 by 10 looks fine let's make them  a bit bigger and they're gonna be white   and I'm gonna give it a stroke which I will  need actually in the other ones and I'll   make the stroke white as well this one sorry  yeah okay so uh this one let's let's double it   we need it four four exactly four Images so I  have them uh actually one above the other I'm   gonna select them Auto layout shift a auto layout  and again I'm going to make it a horizontal one   give them I don't know something like that I  think that is okay and let me just place them   okay let me place them actually cut  and sorry let's call it pagination okay I'm gonna cut it and put it here yeah  okay let me just check the size yeah that's   perfect looks good okay so that's okay let's  call it pagination actually we can give it   pagination one and uh in this one we are going to  select these and give them the fill in zero sorry   not this one I meant the feel not the stroke I'm  saying something and doing something else yeah I   mean this one that's what I meant uh yeah that's  okay and then we're gonna duplicate another one   and this is gonna be pagination two we're gonna  actually you can I'm gonna shortcut it but anyway   what I'm doing is copy properties and here I'm  just gonna paste property so it's gonna look   like that here I'm gonna do the shortcut and do  it like that so that is really quickly by the   way the shortcut is here you see it's Ctrl alt  C in PC command option C in Mac so this is how   you do it actually paste properties and copy  properties so that's just to make create it   really quickly so that is the third one I'm gonna  copy properties paste them here and I'm gonna   copy from here and paste it here something  like that and let's create the fourth one   copy and paste and copy properties and paste  properties that's it we are done with this one   create component set boom we have our pagination  actually uh yeah we don't need that Big Frame we   can close it a bit and do it something like that  good okay that is just that we can switch them and   work easily with them as we create our interactive  component okay so that is going to be a copy and   paste here I'm gonna place it something like that  in the middle of this Frame each component by the   way is a frame so if you didn't know that by now  so basically it's a frame okay so I'm gonna select   this one create another variant and this is going  to be just one I'm gonna call it just one this is   going to be 2 2 . 2 and you know what let's do  them like that I'm just gonna duplicate more let   me see this is going to be three this is going  to be four and uh we need a another one which   we'll call it five okay here by the way in this  ones in these ones uh we're gonna switch to two   this is going to be three this is going to be  four and that one actually is going to stay   on one you will understand that in a sec now  here what I'm going to do is just select the   as you see I'm selecting here the images and  I'm just gonna scroll it sorry this one actually   uh let me see pagination yeah okay so I'm gonna  scroll it like that and yeah that's it's perfect   let me see that it's it's really perfect yeah  good okay so this is going to be the second one   and here I'm gonna select this one select this  one and scroll it to the third one yeah like that   okay good and this one I'm going to scroll to the  fourth one just do it like that really quickly good okay and now this one is going to be scrolled  by the way is going to be scrolled all the way to   the end which we have in the end the same image  again so it's going to be scrolled all the way to   the end okay so we have our situation actually  done and what happens now we're gonna actually   duplicate it another one I'm going to duplicate  another one of this component because we're   gonna show it one time with the swiping and one  time with the after delay okay so basically the   trick is like that uh sorry when I am uh doing  the swiping so I'm selecting the images as you   see not here sorry I'm gonna select it on the  first one let me just collapse them all and it   will be more easy to work with so I'm gonna go to  the first one select the images uh not this one   this one select the images yeah uh inside this  one exactly and now you know let me just take   this one here and let me just take this one kind  of like let's that put let's put them on the side   for a minute and understand what's going on here  uh yeah so we're gonna select this one I'm gonna   go to prototype and here by the way I'm just gonna  yeah I can select it from here as well I'm gonna   drag it and just connect it to the second variant  and we're gonna do it on drag because we want to   create the swiping on drag uh we're gonna do  the SMART animate 600 milliseconds that's okay   by the way when you work with on drag with a drag  trigger uh so maybe you're asking yourself why do   I need the duration so the duration actually is  when you uh swipe or do the the movement of the   dragging actually less than 50 send and leave  it it's gonna go back to the starting point and   this is where the duration kicks in if you're more  than 50 percent this movement of the dragging it's   gonna go engine you just leave it after you finish  kind of like more or less 50 or more percent of   that uh of that step that you have to do with  the dragging and then it's gonna go to the end   of that of that actually swipe and that's where  the 600 kicks in okay because you can do it slow   uh by the speed of dragging your mouse or your  finger so that's why okay so we're gonna select   here the second one we're gonna do the same and  we're gonna do it on drag and this one actually   uh we're gonna do the same hooking up to this one  and we're gonna do it on drag let's just go a bit   you see that's the arrow here because yeah you  can't see it when we're kind of like far away   from it uh and now we're gonna select the fourth  one and do the same just drag it here on drag   and now this is where the trick comes in  so basically uh when we do it like that   now we're gonna need to get back actually  to the first one without noticing because   the thing is that we have this image and this  image start and end so one thing when you want   to create an infinite scroll or in general  an infinite animation I will have another   tutorial more about infinite animation as  well so basically you need the starting   point and the end point to be the same and  then you create can create actually the   infinite animation of it so now from this one  we're just selecting this variant okay where   connecting it to the first one but what we are  doing is we're gonna is what we are doing is   we're connecting it with an after delay okay not  from the by the way let me make it more clear not   from the images as we did before I'm talking about  from the whole variant itself from the component   itself okay so I'm gonna click on this one after  delay 0 delay and we're gonna do it instant so   what happens actually is like that when I'm  dragging this image and getting to this uh   variant instantly it goes to the first one without  noticing and then you can just keep on scrolling   it and it works perfect let's see exactly how  it works now let's get back these two let's get   them back up here and kind of like throw them away  okay so so now I'm gonna take this one I'm gonna   copy it and just putting it and just putting it  here placing it in this screen yeah it's gonna   be here this one is yeah 375. uh I'm talking about  the frame yeah okay that's okay so that is going   to be just here and now let's give it a play and  see how it works okay we're gonna give it a play okay so we have it now here so I'm doing one swipe  the second one third one and now actually you see   it keeps on we can keep on swiping it indefinitely  so that is actually the infinite scroll so it   works perfect okay nice and actually I can put it  also if I want in a mock-up of a mobile to give it   more of a realistic app look and it's going to  look like that we have that annoying thing from   the iPhone but whatever anyway it doesn't matter  so yeah so we see it working great pretty easy   good and now we're gonna do the same actually with  an after delay let it just swipe by itself or kind   of like change the images by itself and as I said  the big one as I did on mobile it happens exactly   the same okay there is really no difference of  the way it happens here actually I'm gonna work   with after delay between the variants themselves  I mean not I'm not work working with the images   but just between the variants so prototype and  this one actually let's get a bit closer yeah   so we're gonna drag this one we're gonna give  it an after delay let's give it kind of like I   don't know three seconds to each image and it's  going to be a smart animate 600 milliseconds I   guess that's okay here the same thing after delay  give it a three seconds repeating myself again the smart anyway animate is good and this  one is going to go all the way here and   three seconds and 600 milliseconds good and  now we're gonna do the same thing as we did   here basically just bring it all the way up to  here after a delay and zero which is gonna give   it one millisecond but anyway that's okay it's  nothing it's like zero it's the same thing and   we're gonna do it instant and that's pretty  much it so I'm gonna copy and I'm gonna put   it just here yeah let's put it here below  this one yeah something like that cool and   now we're gonna see it just doing its thing or  not we have to refresh it yeah let's refresh it okay and now let's see that it's working correctly  okay this is the third one the fourth one and   going back to the first one okay cool so that's it  basically this is the trick and the way of making   an infinite scroll so I guess that we're pretty  much done uh that wasn't a very long one but I   hope that a very understandable one so either  by after delay or by swiping by clicking you   can do it of course if you're on a desktop and  you want to give it the two arrows you know at   the beginning and the end I mean they're like  left and right and just click on them and keep   scrolling it so you can do the same and of course  that I showed it here with images you can do it   to any need that you want so it doesn't have to  be images and it doesn't have to be mobile or   desktop you choose the platform whatever you need  to scroll and that's about it guys so I guess that   we're done uh I would like very much your like if  you did like this tutorial I would be very happy   if you subscribe to my channel of course cool  tutorials are coming up ahead all the time and   if you want me to do any tutorial which you think  uh I should make then just let me know I will be I   will be very happy to make it okay guys thanks a  lot and see you in the next tutorial bye for now

Channel: Yariv BE

Views: 24,827

Keywords: figma, figma tutorial, infinite scroll figma, scroll animation figma, drag trigger, scrolling image in figma, interactive components figma, variants figma, after delay figma, user interface design

Id: npqcQYljttI

Length: 20min 10sec (1210 seconds)

Published: Sun Nov 20 2022