List Load

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.

List animations are fully controlled through CSS.

When a list is filtered—or sorted, or paginated—temporary classes are applied to the Collection List Wrapper to trigger transitions or animations, and then removed once the action completes.

This system supports per-action animation, per-item staggering, and precise control via CSS.

• During a load action, the .is-list-loading class is added to the Collection List Wrapper. It is removed once the action completes.
• fs-list detects any CSS transitions triggered by the class and waits for them to finish before updating the list.
• The class can be renamed using the attribute fs-list-loadingclass.

List items animations are fully controlled through CSS.

Before an item is rendered to the list a temporary class is applied to the Collection List Item, and then removed once the item has been rendered. This allows to trigger CSS transitions simulating a similar behavior to @starting-style.

• Before rendering an item, the .is-list-starting class is added to the Collection List Item. It is removed once the item is present in the DOM.
• fs-list detects any CSS transitions triggered by the class removal and waits for them to finish before updating the list.
• The class can be renamed using the attribute fs-list-startingclass.

This option adds a stagger animation to the items in the List. The value is the time in milliseconds between each loaded item.

A stagger animation is a technique used in animation and web design where multiple elements are animated with slight delays between them. This creates a sequence effect that makes elements appear or move one after another, rather than all at once.

By default, List Load caches the fetched documents for performance, and the cache doesn't expire until the site is re-published.

There are some times where you might want to opt out of this behavior, like when you programmatically update your CMS Collections via the Webflow CMS API without manually publishing the site.

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.

List animations are fully controlled through CSS.

When a list is filtered—or sorted, or paginated—temporary classes are applied to the Collection List Wrapper to trigger transitions or animations, and then removed once the action completes.

This system supports per-action animation, per-item staggering, and precise control via CSS.

• During a load action, the .is-list-loading class is added to the Collection List Wrapper. It is removed once the action completes.
• fs-list detects any CSS transitions triggered by the class and waits for them to finish before updating the list.
• The class can be renamed using the attribute fs-list-loadingclass.

List items animations are fully controlled through CSS.

Before an item is rendered to the list a temporary class is applied to the Collection List Item, and then removed once the item has been rendered. This allows to trigger CSS transitions simulating a similar behavior to @starting-style.

• Before rendering an item, the .is-list-starting class is added to the Collection List Item. It is removed once the item is present in the DOM.
• fs-list detects any CSS transitions triggered by the class removal and waits for them to finish before updating the list.
• The class can be renamed using the attribute fs-list-startingclass.

This option adds a stagger animation to the items in the List. The value is the time in milliseconds between each loaded item.

A stagger animation is a technique used in animation and web design where multiple elements are animated with slight delays between them. This creates a sequence effect that makes elements appear or move one after another, rather than all at once.

By default, List Load caches the fetched documents for performance, and the cache doesn't expire until the site is re-published.

There are some times where you might want to opt out of this behavior, like when you programmatically update your CMS Collections via the Webflow CMS API without manually publishing the site.