Load More
Use cases
How to use it
Paste before </body> tag of the page you're working with.
Standard implementation
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.7.js"></script>
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "customBlogPosts"
var fsMagic = new FsLibrary('.blog-posts-list')
// run the loadmore Library component on your instance
fsMagic.loadmore({
button: ".load-more-button", // class of Webflow Pagination button
resetIx: true, // adds Webflow interactions to newly loaded item
animation: {
enable: true,
duration: .3,
easing: 'ease',
effects: 'fade'
}
})
})();
</script>
Use pagination
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.7.js"></script>
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "customBlogPosts"
var fsMagic = new FsLibrary('.blog-posts-list')
// run the loadmore Library component on your instance
fsMagic.loadmore({
button: ".load-more-button", // class of Webflow Pagination button
resetIx: true, // adds Webflow interactions to newly loaded items
loadAll: true, // loads ALL items in your collection load on the page. Required for pagination
paginate: {
enable: true,
itemsPerPage: 5,
insertPagination: '.pagination-container',
bgColor: '#FFFFFF',
bgColorActive: '#000000',
textColor: '#000000',
textColorActive: '#FFFFFF',
borderColor: '#000000'
},
animation: {
enable: true,
duration: .3,
easing: 'ease',
effects: 'fade'
}
})
})();
</script>
Use infinite scroll
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.7.js"></script>
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "customBlogPosts"
var fsMagic = new FsLibrary('.blog-posts-list')
// run the loadmore Library component on your instance
fsMagic.loadmore({
button: ".load-more-button", // class of Webflow Pagination button
resetIx: true, // adds Webflow interactions to newly loaded items
loadAll: false, // required false for infinite scrolling
infiniteScroll: true, // set to true to continuously load more items as you are scrolling. Default is false
infiniteScrollPercentage: 70, // % of the total height of the collection list in view to trigger infiniteScroll
animation: {
enable: true,
duration: .3,
easing: 'ease',
effects: 'fade'
}
})
})();
</script>
Code explanation
The variable we created to store our Library instance. The name of the variable can be set to whatever you want.
The class of the load more button that loads more Collection Items. This must be the native Webflow Paginate button.
Cool: The button hides itself after there are no more items to load (NICE!).
.png)
Resets Webflow Interactions to make sure your newly loaded items have interactions applied to them.
Set to ~true~ if you have Webflow interactions within your Load More instance. Set to ~false~ if you have no interactions on your page.
Loads all of the items in your Collection. This can load more than 100 items in a single Dynamic List
~false~ = only load the first set of items in your pagination
~true~ = load all of the items in your pagination.
If you have no reason to set ~loadAll~ to ~true~, set to ~false~.
Tutorial for loadAll https://cmsdocs-howto.webflow.io/loadmore/example3
Option to add a pagination element to your Load More component.
Tutorial for pagination https://cmsdocs-howto.webflow.io/loadmore/example5
~true~ turns pagination on, ~false~ turns pagination off (default: ~false~).
Amount of items to show inside each page of pagination.
For example, ~5~ would show 5 items in each page of pagination. ~20~ would show 20 items in each page of pagination.
itemsPerPage accepts a number (~5~).
Where we "insert" the pagination component on the page.
Place a div with a unique class on the page. It should be placed where you want pagination to appear. We insert, or "paste" the pagination element inside insertPagination.
insertPagination accepts a class name (~.pagination-container~).
Applies a ~background-color~ to the pagination element.
bgColor accepts a hex value (~#FFFFFF~).
Applies a ~background-color~ on the active-state of the pagination element's page item.
bgColorActive accepts a hex value (~#AAAAAA~).
Applies a ~color~ to the pagination element. This changes the color of the text.
textColor accepts a hex value (~#000000~).
Applies a ~color~ on the active-state of the pagination element's text.
textColor accepts a hex value (~#000000~).
Applies a ~border-color~ to the pagination element.
borderColor accepts a hex value (~#000000~).
Continuously load more items from the Collection List as you reach the end of the list. This creates an 'infinite scrolling' effect.
~false~ = continuous infinite scrolling is turned off. User must click "Next" button to load more items
~true~ = continuous infinite scrolling is turned on. Items will load automatically for the user as they scroll
Tutorial for infiniteScroll: https://cmsdocs-howto.webflow.io/loadmore/example4
Works with infiniteScroll.
The percent height of the Collection List element scrolled so far before infiniteScroll is triggered. A smaller percentage value will load items sooner than a larger value.
Recommended to set between 60-80. Trial and error testing with your list setup is recommended.
Tutorial for infiniteScroll: https://cmsdocs-howto.webflow.io/loadmore/example4
Option to add animations and transitions for items being loaded with the Load More button.
~true~ turns animation on, ~false~ turns animation off (default: ~true~).
Time the animation happens in seconds. ~0.2~ would be 0.2 seconds, or 200 milliseconds (default: ~0.2~).
Easing of the effect. Available options are ~ease~, ~ease-in~, ~ease-out~, and ~ease-in-out~ (default: ~ease~).
Add ~fade~, ~translate~, ~rotate~, and ~scale~ effects (default: ~fade~).