Load More
Use cases
How to use it
Paste before </body> tag of the page you're working with.
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.6.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 customBlogPosts = new FsLibrary('.blog-posts-list')
// run the loadmore Library component on your instance
customBlogPosts.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 pagination list after the page loads. Default is false
infiniteScroll: true, // 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 infinite scroll
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 items inside Pagination. This can load all items inside a collection.
~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~.
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
the percent height of the Collection List element scrolled so far. This triggers the Load More component to load more items to the list. 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.
Option to add animations and transitions for items being loaded with the Load More button.
~true~ turns on 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~).