Problem with Finsweet Load More + Hover Element Trigger

Design help Custom code
1

Hey community!

I’m trying to do a Load More button and I’m using the Finsweet Load More Component for this. But when I click on the button, my hover Element Trigger doesn’t work anymore. Has anyone had this problem?

Script used before body tag

<script src="https://cdn.finsweet.com/files/cmslibrary-v1.8.js"></script>
<script>
(function() {
var fsComponent = new FsLibrary('.the-team-list')

fsComponent.loadmore({
  button: '.load-more',
  animation: {
    enable: true,
    easing: 'ease-in-out'
  }	
})
})();
</script>

Thank you :slight_smile:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

can you share the live and read only link

3

Same problem here. Element Trigger doesn’t work anymore when I load the next page.

4

Replying to this as I could not find the answer, the way I went around this, is to create an embed on the page, and target the Div with CSS directly, the load more button works, and the CSS hover also works. for some reason the JS animation in Webflow does not.

1 Like
5

For anyone looking for a solution to this issue and using CMS Load More with Finsweet Attributes, add the reset interaction attribute to the collection list. It’s listed as one of the options under ‘More attributes to use’. Here’s a link to the page: CMS Load more for Webflow - No-code using Attributes

image
image889×302 26.3 KB

10 Likes
6

Hi Jaslyn, thank you for this, it was super helpful. My hover effect for my cards is now working but the z-index change on hover is being ignored. I saw the warning on the CMS Load page about the reset restoring initial states. Wondering if you have any ideas on how to work around this so I can get the z-index change up and running again.
Page: (Note: The layout is busted while I’m working out how to get the featured card into the same collection list with my other cards).
https://tastytrade-sw.webflow.io/press-filter
Read Only:
https://preview.webflow.com/preview/tastytrade-sw?utm_medium=preview_link&utm_source=dashboard&utm_content=tastytrade-sw&preview=520ea475caf90e9d7127fa519d107611&workflow=preview

7

This solution works great if you’re not using Webflow quick animations on the page. :+1:

If you are using them however, the initial state is reset which can cause elements all over the page to be hidden (and not reappear on scroll).

I had this issue and was able to resolve it by using CSS for the hover animation (as suggested by @WeWebDesign - thanks Keith)