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

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

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.