Hey guys,
Have been building a site for a client and am using pagination for loading multiple CMS items. On the first page the interactions work great, however, when I click the next pagination button all the interactions stop working.
Can’t share link as is confidential atm
Here is my public share link: LINK
(how to access public share link)
Hey Geeza,
I stumbled across this thread while searching because I’m having this problem myself. Did you find a solution?
Hey mate, the only workaround I found is a bit finicky. I used the F’inSweet CMS load more attribute which you can read about here: CMS Load more for Webflow - No-code using Attributes
If you scroll down the page, you’ll see the added attribute of ‘reset interactions’, but they do give you a warning:
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.
So I had to build animations on the page in question with 90% of them not using ‘Initial State’. This isn’t too muhc of a bother, as you just set the style of each element to reflect the starting position, thus not needing to animate using Initial State. I can share a link to a duplicate I made of a client site which has some peeled back code etc to avoid infringment:
And the live site so you can see the see the F’inSweet JavaScript in action and the reloading IX
https://northcote-theatre-7e0b198c562ae88746218.webflow.io/
So none of the interactions have ‘Initial state’ set, except the scrolling banner on the CMS items like ‘selling fast’ and ‘sold out’ . So when I click the ‘+show more’ button it loads the next CMS items in the pagination and restarts ALL animations with the ‘Initial State’ set. I.E ONLY the scrolling banners will reset.
It’s not a huge issue if you take into consideration that all other animations must be built at their starting locations/states to avoid them popping up unexpectedly. So far it’s worked fine haha
Hope that helps 
Geeza
Hey, thank you for the feedback and your efforts! I could solve it in a different way. Unfortunately, I had to think of a completely different solution. But it works now 
Hello, newbie here. How do I use the method you mentioned? What element does the attribute get added to? And I don’t understand the “Where? Add to an element with fs-cmsload-element = “list”” part in the link you sent.
Hey Ash,
You can follow the instructions in the link I sent, Fin Sweet also have a bunch of great videos to help you out too.
If you post a read only link I can take a look at your site and help 
You have to add the “fs-cmsload-element” to the ‘Custom attributes’ of an element. As you can see here:
You then put the “fs-cms-load” attribute in the Name field, and the “list” answer in the Value field:
You put this on the collection list element.
Hey guys
I’m looking for a solution since 4 hours. I have 3 nested CMS Collections and used the Finsweet Tutorials for this. So far so good. But then, I wanted to click on a single item from collection 3 to show the multi-reference items of collection 4. Interaction just doesn’t work…
Found this as well: https://www.finsweet.com/attributes/faq/can-i-have-interactions-on-nested-collections
Tried multiple locations for “fs-cmsload-resetix = true” and the “CDN Import” Script. Not sure if I need the “JavaScript API” to achieve it.
I can put the “fs-cmsload-element” in the settings of a section where my collection is right?
Hope anybody can help me out! Really appreciated.
Unfortunately I can’t share my RO-Link because it’s a client project.
Cheers
Thanks!! Adding the “fs-cmsload-resetix = true” fixed the issue for me.
Somehow the finsweet solution resetix did not work for me so here is what I did with the help of good ol’ChatGPT. So I asked the following prompt:
“How do I do a load more button for collection items in Webflow without using Finsweet?”
This is what it answered:
Design Your Collection List and Load More Button : Set up your collection list and design it as you normally would. Place a button at the bottom of the collection list to serve as your “Load More” button.
Add Custom Code : You’ll need to add custom JavaScript to handle the “Load More” functionality. Here’s an example of how you might structure this code:
<!-- Add jQuery if not already added -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Set the number of items to show initially and the number to load each time
var itemsToShow = 6;
var itemsPerLoad = 3;
var collectionList = $(".your-collection-list");
var loadMoreButton = $(".load-more-button");
var allItems = collectionList.find(".collection-item");
var hiddenItems = allItems.slice(itemsToShow);
hiddenItems.hide();
loadMoreButton.on("click", function() {
var visibleItems = collectionList.find(".collection-item:visible");
var nextItems = hiddenItems.slice(0, itemsPerLoad);
if (nextItems.length === 0) {
loadMoreButton.hide();
} else {
nextItems.fadeIn();
}
hiddenItems = hiddenItems.slice(itemsPerLoad);
// Scroll to the top of the newly loaded items
$("html, body").animate({
scrollTop: collectionList.offset().top
}, 300);
});
});
</script>
Based on the code above, you need to replace the following classes:
I’m not an expert on js and only rely on chatGpt, but I think this does the job for me.
I think Finsweet is a good solution, but in my case I could not make the image appear on hover via the mouse over element interaction.
Here is a copy of a website that I am building now with that piece of code in it. Hope this works for you also and others who will read this. -
hi,
can u also help me with my site, I have serval interaction on my site it all work fine but when I switch pages up nothing works at all. I have been looking for the solution but nothing works. this is my college project it should be submitted till June 11. can u please help me ?
( it not finished yet)
here is my read only link-
https://preview.webflow.com/preview/armanveers-singh-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=armanveers-singh-portfolio&preview=69db65fcbdbf750704407a9b6ef9dc9b&workflow=preview