My Interactions stop working after a page change using pagination

@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

2 Likes