My Interactions stop working after a page change using pagination

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

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 :smiley:


1 Like

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 :wink:

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 :slight_smile:

You have to add the “fs-cmsload-element” to the ‘Custom attributes’ of an element. As you can see here:
Screenshot 2022-06-17 150301

You then put the “fs-cms-load” attribute in the Name field, and the “list” answer in the Value field:
Screenshot 2022-06-17 150607

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:
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 :slight_smile: