How to add an attribute:

close icon
Hey! Give us some feedback here.
Functional

CMS Load

Set up powerful load functionality on Webflow CMS Collection Lists. Load items under, infinite scroll, pagination, and render all items.

CMS Load
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

Required for minimum setup

Below is the one element attribute required for CMS Load. Choose one of the four options for the list element.

navigator arrow
LIST
I want this

Collection List

See how it works
see webflow attributes
to have the load more functionality
Add this attribute
Description
Name
fs-cmsload-element
copy icon
Value
list
copy icon
Check live example here
This is the CMS Collection List that will have load more functionality.

IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
how to add cmsload list attribute
navigator arrow
Speed Boost
I want a supercharged speed boost
See how it works
see webflow attributes
Enable "Show page count" in Webflow's native pagination settings to activate.

No attribute needed.

Increase the speed of your loaded pages by enabling the native Webflow pagination page count option. The page count element can be visible or hidden on the page. With this setting enabled Attributes can optimize your load based on your page count.

By setting this feature you get a 100% improvement for every 4 pages.

4 pages = 200% faster
8 pages = 300% faster
12 pages = 400% faster
16 pages = 500% faster
.....
Where?
Select the native Webflow pagination button. Go to the "Settings" panel for that button element. Select "Show page count". This element can be hidden with display: none.
navigator arrow
Option
PAGINATION
I want to use a "pagination" effect for the Collection List
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-mode
copy icon
Value
pagination
copy icon
This option enables same-page pagination for your Collection List.

The "Next" and "Previous" buttons in the native Webflow pagination settings will be used as the "Next" and "Previous" pagination buttons for this option. Style them as needed to fit your design.

IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
Where?
Add to an element with fs-cmsload-element = "list"
navigator arrow
Option
LOAD UNDER
I want to use a "load under" effect for the Collection List
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-mode
copy icon
Value
load-under
copy icon
This option loads more items on the page under the existing items when the "Next" button is clicked.

The "Next" button in the native Webflow pagination settings will be used as the button that performs the "load-under" functionality. Style it as needed to fit your design.

IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
Where?
Add to an element with fs-cmsload-element = "list"
navigator arrow
Option
RENDER ALL
I want to render all items in the CMS Collection
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-mode
copy icon
Value
render-all
copy icon
This option is usually not required. Pagination is equally as powerful without the rendering. Please understand it.

This option renders all of the items in your Collection. This loads and renders more than the 100 item limit in a single Collection List.

For example, if you have 5,488 items in your Collection, all 5,488 will load and render on the page.

IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.

** EXTRA IMPORTANT: Please be mindful of what you are loading. Loading thousands of items to the page may not be a good experience for your users, especially those on mobile connections. You should only use this option when it's required for your project. Consider "pagination" instead of "render-all". The "pagination" option is more performant when used with CMS Filter.
Where?
Add to an element with fs-cmsload-element = "list"
navigator arrow
Option
INFINITE
I want to use a "infinite scroll" effect for the Collection List
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-mode
copy icon
Value
infinite
copy icon
This option enables infinite scroll loading for your List. As the user continues scrolling down the page, more items will load.

IMPORTANT: It is required that native Webflow pagination is enabled for your Collection List. This can be done in Settings of the Collection List.
Where?
Add to an element with fs-cmsload-element = "list"

More attributes to use

Below is a list of Attributes that can help you customize your load functionality

navigator arrow
LOADER
I want this

Image, GIF, HTML Embed or Lottie Animation

to show the loading progress of the list
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-element
copy icon
Value
loader
copy icon
I want this element to be visible during the loading progress.

When items are loading on the page, this element will be visible. When items are not loading on the page, this element will be hidden.
how to add cmsload loader attribute
navigator arrow
Option
RESET INTERACTIONS
I want to use interactions on Collection List Items.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-resetix
copy icon
Value
true
copy icon
If you are using interactions on Collection List Items (or any child of them), they won't work on the newly loaded items unless you apply this attribute to the Collection List.

Warning: When using this attribute, all interactions that have an Initial State will be restored to it, use with caution to avoid unexpected UX behaviors.
Where?
Add to an element with fs-cmsload-element = "list"
navigator arrow
Option
THRESHOLD
I want to set when the items start loading for infinite scroll.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-threshold
copy icon
Value
-20
copy icon
This option sets the threshold value in vh for when items in infinite load are loaded. Default value is -20.

The threshold value is relative to the distance between the bottom of the list and the bottom of the viewport.

Examples:

fs-cmsload-threshold = "-20" : The list will load items when there is a -20vh difference between the bottom of the list and the bottom of the window.

fs-cmsload-threshold = "50": The list will load items when there is a 50vh difference between the bottom of the list and the bottom of the window.

IMPORTANT: This attribute only works when fs-cmsload-mode = "infinite" is enabled for your Collection List.
Where?
Add to an element with fs-cmsload-element = "list"
navigator arrow
Option
ANIMATION
I want to change the animation of the loaded content
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-animation
copy icon
Value
fade
copy icon
This option customizes the animation effect of the loaded content.

The default animation is fade

Value options: fade, slide-up, slide-down, slide-right, slide-left, grow, shrink, spin
Where?
Add to an element with fs-cmsload-element = "list"
navigator arrow
Option
DURATION
I want to specify the duration of the fade animation
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-duration
copy icon
Value
100
copy icon
Change duration of the fade animation on the loaded Collection List.

Values are in milliseconds. Default is 100ms.

If you already have fs-cmsfilter-duration applied to the list, this attribute is not needed. Only one duration is needed.
Where?
Add to an element with fs-cmsload-element = "list"
navigator arrow
Option
STAGGER LOAD
I want to add a stagger animation when loading the contents
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-stagger
copy icon
Value
200
copy icon
This option adds a stagger animation to the items in the List. Items will animate in one-by-one in series. The value "200" is the time in milliseconds between each loaded item.
Where?
Add to an element with fs-cmsload-element = "list"

Advanced Pagination Features

OPTIONAL. These attributes are specifically for setting up a custom pagination interface. These attributes only work when the pagination option is used.

navigator arrow
PAGE BUTTON
I want this
button icon

Button, Link Block or Text Link

to serve as a template for page buttons in pagination mode
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-element
copy icon
Value
page-button
copy icon
This element is used as the template for custom pagination page buttons. If not added, pagination will work with the native Webflow Next and Previous buttons.

IMPORTANT: 

This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.

The element with the fs-cmsload-element = "page-button" must be inside a div block to work and load the other paginations buttons.

Current/active state state is managed by Webflow's 'current' state styling. To edit the current state of the page button, set the button url to the current page.
how to add cmsload page button attribute
How to edit the current state:
navigator arrow
Option
PAGE SIBLINGS
I want to customize how many page buttons to show based on the active page in the pagination UI
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-pagesiblings
copy icon
Value
1
copy icon
Set the amount of pages in the pagination UI that are shown on each side of the active page.

The default value is 1.

The visual below will help with understanding this option.

IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.


RESPONSIVE OPTION:
Customize the pagesiblings by breakpoint by using comma separated values for each breakpoint like this: fs-cmsload-pagesiblings = "desktop, tablet, mobile landscape, mobile portrait".

For example, fs-cmsload-pagesiblings = "3,2,1,1"
Where?
Add to an element with fs-cmsload-element = "list"
webflow pagination feature
navigator arrow

Option

I want to copy the text of the "click" trigger button
See how it works
see webflow attributes
Attribute
Option / Functionality
Name
fs-copyclip-copy
copy icon
Value
copy-me
copy icon
When clicking on the trigger element (fs-copyclip-element = "click"), the text of the button element will be copied.

This attribute should be added to the same element that has the click trigger, fs-copyclip-element = "click"
navigator arrow
Option
PAGE BOUNDARY
I want to customize how many page buttons to show on the ends of the pagination UI
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-pageboundary
copy icon
Value
1
copy icon
Set the amount of pages in the pagination UI that are shown as the first and last pages.

The default value is 1.

The visual below will help with understanding this option.

IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.


RESPONSIVE OPTION:
Customize the pageboundary by breakpoint by using comma separated values for each breakpoint like this: fs-cmsload-pagesiblings = "desktop, tablet, mobile landscape, mobile portrait".

For example, fs-cmsload-pagesiblings = "4,1,2,1"
Where?
Add to an element with fs-cmsload-element = "list"
how to add cmsload page boundary attribute
navigator arrow
Option
Query Parameters
I want to show the native Webflow pagination query parameters (?4f82d9d6_page=2)
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsload-showquery
copy icon
Value
true
copy icon
Show native Webflow pagination query parameters when changing pages in pagination.

The default value is false.

Setting this attribute to true will add a query at the end of your url with the page parameter, like this https://websiteurl.com?4f82d9d6_page=2.

IMPORTANT: This attribute only works when option fs-cmsload-mode = "pagination" is added to the "list" element.

Compatible with multiple CMS Load lists on the same page, both using query params. Compatible with showquery option in CMS Filter.
Where?
Add to an element with fs-cmsload-element = "list"

Working examples

See this solution working live in this Webflow project.

Example 1
Load more content with button
Showing 0 items
Capri Island
Capri
/
Italy
Capri Island

Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.

American Museum of Natural History
New York
/
United States
American Museum of Natural History

Is a natural history museum on the Upper West Side of Manhattan, New York City.

The Vatican Museums
Rome
/
Italy
The Vatican Museums

The Vatican Museums are the public museums of the Vatican City.

Copy and paste this example directly on Webflow
locked icon
Coming soon
Example 2
Load more content with Webflow pagination
Showing 0 items
Taj Mahal
Agra
/
India
Taj Mahal

The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.

Central Park
New York
/
United States
Central Park

An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.

Golden Gate Bridge
San Francisco
/
United States
Golden Gate Bridge

The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.

Copy and paste this example directly on Webflow
locked icon
Coming soon
Example 3
Infinite load content during the scroll
Showing 0 items
Capri Island
Capri
/
Italy
Capri Island

Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.

American Museum of Natural History
New York
/
United States
American Museum of Natural History

Is a natural history museum on the Upper West Side of Manhattan, New York City.

The Vatican Museums
Rome
/
Italy
The Vatican Museums

The Vatican Museums are the public museums of the Vatican City.

Copy and paste this example directly on Webflow
locked icon
Coming soon

Developer documentation

external link icon

Watch a video explanation

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.