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?

@bjrnschrbr

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:

https://preview.webflow.com/preview/northcote-theatre-7e0b198c562ae88746218?utm_medium=preview_link&utm_source=designer&utm_content=northcote-theatre-7e0b198c562ae88746218&preview=d91f997fbc770dc379d122f50aee39db&workflow=preview

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

Geeza

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