Framer Update, CMS

Framer Update: CMS Pagination

Benjamin

5:36

13K views

Jun 6, 2024

About this lesson

Today we’re introducing CMS Pagination, supporting both Infinite Scrolling and a manual Load More button. To add Pagination, simply select your Collection List, click on Pagination, select one of the two options, then pick how many items to load. Pagination also works with existing Limits and Start Offsets. Both the Spinner and Button are completely customizable, and you can pick any Variant for their Loading states. The Spinner itself is just a layer with a conic gradient and a Loop Effect, so you get full control. Adding Pagination helps make your blogs and changelogs much faster to load, especially when they contain dozens of items. https://framer.com/updates/cms-pagination

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00yo my name is Benjamin and in this video 0:03I'm excited to introduce CMS pagination 0:07here's how it works I have two 0:09collection lists here this one is 0:12limited to the last item and this is my 0:16main collection list with all other 0:18posts and we might think these are too 0:21many items to load in at once and we 0:23would like a little pation which is 0:26especially useful when you have hundreds 0:28of items as that can make your site much 0:31slower to load to add pation I can click 0:35on our collection list head over to the 0:37property panel and click add and this 0:41allows me to pick between infinite 0:43scroll and a load more button I'll go 0:47with load more 0:49first and here we can select how many 0:52items we would like to show initially as 0:55well as how many items we would like to 0:57load whenever you click load more 1:00framer has automatically added a load 1:03more button to our collection list 1:06clicking this will now load the next for 1:08items this button is just a component 1:11with variants and the variants are 1:13mapped to the actual loading State and 1:16the hidden State here and we can 1:19doubleclick on the button to customize 1:23these 1:26variants for example we could change the 1:29fill color here 1:30here to be a bit more 1:34subtle and we could assign a 1:38textile to have it match a bit more with 1:40my blog demo then I'd like to customize 1:43the padding just a little bit to have it 1:46vertically 1:48centered and then revert that on the 1:50loading 1:51State and there we go some light 1:55customization it's also worth pointing 1:58out that this spinner is completely 2:00customizable as 2:02well it has an appear effect by default 2:06set to 0.3 seconds this makes sure that 2:10if your content loads really fast like 2:12on our lightweight demo you don't see a 2:16flash of a spinner while on slow 2:18connections the spinner will appear as 2:21you would expect the spinner itself is 2:23just aonic gradient with a mask and a 2:26loop effect this means you can customize 2:29every single detail from its size to its 2:33color and its animation speed next we 2:37can go back to our homepage Now by 2:40default the spacing between the last 2:43item and your low more button is 2:46dictated by the Gap value of your 2:49collection list however you can also add 2:52more spacing either with in the 2:54component or around the component for 2:57example I can rightclick add a stack and 3:01then add some top padding this does mean 3:04that this spacing is always there even 3:07when there are no more posts to load to 3:10avoid this we can bake it into the 3:13component which will do for the spinner 3:15in a little bit but first let's give 3:18this a preview as we scroll down we get 3:21our button and when clicked we instantly 3:25get the next batch of items so the L 3:29more button is easy to add fully 3:32customizable and makes your SES faster 3:35to load next infinite scrolling I'll 3:38head over to the pagination property and 3:41I'll select it in the menu and this adds 3:44a spinner instead of a button when using 3:47infinite scrolling it's recommended to 3:50not have any footer or contents below 3:53your spinner to avoid a cumulative 3:56layout shift penalty which is a metric 3:59that's a part of Google's score web 4:02vitals you can learn more about this on 4:05our site but for now I'll simply remove 4:08the footer then I'll select my desktop 4:12breakpoint add some bottom 4:14[Music]4:15padding and then let's double click into 4:19the loading spinner this one is fully 4:22customizable as well and just like the 4:25spinner in the button here we've also 4:28added a 3 second and fade in effect this 4:31ensures that your spinner doesn't flash 4:33when your content loads in very quickly 4:36next I'll select the variant flip the 4:40direction and set distribute to end this 4:44allows us to change the height while 4:46this spinner remains docked to the 4:49bottom effectively allowing us to bake 4:52in some top 4:55spacing now when we scroll towards the 4:58bottom of our page 5:00the next four items will load 5:03automatically and while this may be a 5:05bit hard to see in our demo here as the 5:08new items load in so quickly this will 5:11have a huge impact on sites with dozens 5:14or hundreds of items as adding any form 5:18of pagination to those pages will make 5:20your sites much faster to load that's it 5:24for this video thank you for watching 5:26and stay tuned for more updates coming 5:29coming soon

TeachesCollection Lists

Also coversAppear Effect Breakpoints Collections Component Variants Components Loop Effect Spacing Stacks

Watch on YouTube ↗

‹ Creating your first form in Framer

Framer Update: Stacks, Breakpoint Switcher, Text Stroke ›