Load More

Load items from your Collection List on the same page.
Scroll
Scroll
Scroll
Scroll
Scroll

Use cases

Prevent long load time
Your Collection has lots of Items. Maybe these Items also have 'heavy' graphics. The page may take too long to load and Load More may be necessary for a quick load experience.
You want to use Pagination, but don't want to load a new page
Load the new items on the page page, directly under the already loaded Collection Items.

How to use it

Paste before </body> tag of the page you're working with.

<!-- F'in sweet CMS Library for Webflow -->
<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>

Copy code

Code explanation

customBlogPosts

The variable we created to store our Library instance. The name of the variable can be set to whatever you want.

button

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!).

resetIx

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.

loadAll

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~.

infiniteScroll

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

infiniteScrollPercentage

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.

animation

Option to add animations and transitions for items being loaded with the Load More button.

enable

~true~ turns on animation on, ~false~ turns animation off (default: ~true~).

duration

Time the animation happens in seconds. ~0.2~ would be 0.2 seconds, or 200 milliseconds (default: ~0.2~).

easing

Easing of the effect. Available options are ~ease~, ~ease-in~, ~ease-out~, and ~ease-in-out~ (default: ~ease~).

effects

Add ~fade~, ~translate~, ~rotate~, and ~scale~ effects (default: ~fade~).