Master Carousels in Framer (Slideshow, Ticker & Carousel)

in this video you will learn all you need to know to master framers ticker Carousel and slideshow components but before we start tinkering with them in the software we should make sure we're using the right component for what we're trying to build so let's bring up framers documentation real quick when it comes to the ticker this is what it says the ticker is to be used for infinitely animating sections that seamlessly connect like strings of text a wall of tweets or a gallery it handles the duplication for you it does not include controls or snapping you can customize the overall animation speed and slow down the Ticker on Hover now when it comes to using the ticker in practice it's actually very simple you go into the framework interface you go to your insert panel up here you search for ticker then you just drag it onto your canvas like this then we can increase the width so it covers the full entire canvas and now the last step is just to connect it to anything you want in this case I'm connecting it to a pair of images here on the side of my canvas could be Carousel cards could be text objects whatever you feel like and now we have a working ticker the next step is to go to the right side panel here and now we can start making some tweaks to it so first of all we have the items here you can see children these are the items the images I'm using I can grab them and change the positioning like this I can go to speed here and change the speed of the ticker so now if we play it it's much faster I can change the direction of the ticker and make it a bit higher so now it's vertical instead I can also change the alignment it's going to be aligned to the right within this container to the left like this or the center we can also change the gap between the items so let's change the direction here again and if we click here now I can change the Gap like that I can also change the padding so change the padding like this we can go to sizing here so we can change the size of the items within the ticker so I can see that I want all of the items to stretch to stretch out within this container we can tell them to stretch out height wise too so they stretch upwards instead or just go Auto so that we have the same size as we have here you can also do clipping so if we don't want to have this nice fade we can turn off the fade we can change the width of the fade we can change the inset of the fade so when does it begin you can see that we push it inwards here by increasing the percentage here and we can change the opacity like this of the fade the last thing you can do is you can go to the hover here so now it says 1X so whenever we hover on the sticker that speed is going to be the same I can change this to 0.5 x and now if we hover it you can see that the ticker slows down and this is all super cool but let's see what the documentation says about the carousel the carousel uses CSS scroll snapping it allows you to swipe and drag on mobile and is great for fluid horizontal and vertical scrolling sections optionally with arrow controls and dots it is optimized to support pagination multiple items per page because it's CSS based it performs really well on mobile devices the animations are handled by the browser so they cannot be customized so with that context in mind let's jump back into framework here and let's search for Carousel we take the carousel component we drag it onto the canvas this is basically the same thing we just place it here we increase the size of it and then we can start connecting it to items on our page once again same as the ticker and once we've done that and now I can decrease the window here so it's easier to see once we've done that now we have a working Carousel that's how easy it is and you can see that it's even Dynamic here it's responsive is what I tried to say and it just works smoothly as butter you can see here even snaps to the card uh in the center so if we go to the right sidebar and we'll look at the different options here you can see that we have once again the children how many items we have we have the direction we have the alignment the Gap the padding the sizing what sizing do we want for items and we also have something called snapping and if we click on snapping you can see that it's currently enabled and what you just saw where it snapped to the center the center card that is what the snapping does if we disable it we're just going to be able to free flow scroll so if I disable it and we play it once again it's just gonna free flow scroll to the sides like this and that's what snapping does so usually we have it enabled then we have the fading do we want the fading in the edges like we had on the ticker component then we can go in here and customize it we even have this transition for the fading so if we click here we can make the transition of the fade have a nice little animation so the transition of the fade is when the fade goes from the right side to the left side here and that's that that's the fading we have something called progress and for Progress we can either have a scroll bar so if I enable that I can just scroll like this that is our progress indicator or we could say no we want dots and those dots you can customize the way you want so you can see here same thing progress indicator but it's dots instead this is a typical pattern for carousels and yeah you can customize it the way you want with all of these settings like the size of the dots the inset how far is it going to be from the bottom and GAP padding fill color backdrop anything you want to do to the dots you can do from here then we have the arrows you can click here you can choose not to have arrows so we click no then we don't have any arrows here we just scroll like this or we choose to have arrows and we can change the fill color so the background here we can change the actual arrows themselves so do we want a different kind of Arrow or an image we can go crazy with this if we want to we can change the size once again like this radius is it going to be rounded or not the inset everything from this menu and the last pretty boring part but very very important the accessibility so maybe we want to call this a image carousel not super descriptive but you want to use the accessibility options as well as you can and then the last thing you have is the radius of the carousel here now the carousel is awesome but the most awesome component that framer has is actually the slideshow component so let's see what they say about it in the documentation the slideshow is a hybrid of the above it allows you to create autoplaying and infinitely looping slideshows it also includes controls like arrows and dots just like the carousel that snapping and looping animation can be customized and you can pause the entire slideshow on Hover now when it comes to the slideshow component inside of framer what we do obviously is we search for slideshow we place it on our canvas once again we can resize it like this and then we can just go and connect it to our different images like this now what you can see here immediately is that it doesn't look like the Carousel and the reason for that is at this point is because we're just showing one item so I can go to items here in the right settings bar and change the number of items that we're showing now I just want to show one item and I'm actually going to decrease the size of this slideshow to show you the cool effects you can create with it so I decrease the size of it I am going to go to the effects panel here and this effects panel is a way for you to kind of customize how you want the items that are inactive how you want them to look and behave when you do the scroll or the slide in your slideshow so for me I'm going to change this to 0.5 percent sorry 50 opacity 0.5 in scale gonna change the perspective here from 1200 to 900 I'm just playing around here and we'll change the rotation to 90 degrees before we do anything because if I play this now you can see that we get this cool effect it looks really nice but you can see that it Clips here in the corners in order to not get that clipping we have to go to clipping and change from overflow hide to overflow show and once we do that now you can see that we get this full animation we can see how things happen in the background and how they kind of just flip into the next slide and you can play around with this there are so many cool effects you can create with it you just use basically the effects panel here and you change the transition so the actual animation here you can change the stiffness play around with the damping and the mass and see if you like the animations more when you change these settings make it a bit slower faster twitchier whatever you want to do this is like your playground when it comes to slideshows and yeah this is what you get with the slideshow you can change it to be draggable you can change from autoplay yes to no the interval how fast is it gonna autoplay all of these settings in the right sidebar definitely the coolest component you have within framer I suggest you start playing around with it now if you have anything else you want to learn when it comes to framework well I have a playlist here where I talk about things all things framer really so check that out until the next one have a great life we'll talk soon ciao

Channel: Tim Gabe

Views: 74,654

Keywords: ui, ux, product design, ui design, ux design, framer tutorial, framer tutorial for beginners, framer carousel, framer slideshow, framer ticker, framer for beginners, framer sites animation, framer sites tutorial, framer website, framer components, framer slider, framer image gallery, framer image slider

Id: nS_9yAABLwc

Length: 11min 20sec (680 seconds)

Published: Thu Jun 01 2023