Load More Button For CMS Items in Webflow | Finsweet Attributes

Come on this adventure with E.T. and me to learn how to use The Finsweet Attribute Library to build a load more button for your Webflow CMS collection items! I’ll show you how to incorporate pagination or a loading effect to easily render more CMS items as the user scrolls down. 🌕🚲👽
Webflow Cloneable Project Preview
webflow.com/made-in-webflow/w...
Finsweet Attributes
www.finsweet.com/attributes
Webflow Profile:
webflow.com/cullenkuch
Portfolio Website:
www.cullenkuch.com/
Feel free to like, subscribe and let me know your favorite movie in the comments below!
😁🎬🖥

[@Thingwithlegs]

Your videos are seriously so useful and clear, besides not having unnecessary “I need views” information. Love it. Hope we can see more!

[@CullenKuch]

Thanks so much, that's great to hear!

[@danielamorue]

Recently found your channel and all I can say is I love love what you do. Please keep it going.

[@CullenKuch]

Thanks so much Daniel, you made my day. I'm hoping to get another video out this weekend! 😄

[@GowthamN-sp9wc]

you are doing good. I have a question about how to load more in 2 different collection lists with CMS Combine ?

[@steveworrell]

Thanks for making this video. Do you know if the load more functionality works on collection lists with over 100 items?

[@CullenKuch]

Hey Steve, it should work yes. I don't see anything in their notes about restrictions on collection size. It works in combination with other attributes as well so there would probably be a workaround if needed. finsweet.com/attributes/cms-load

[@emmamccanntravel]

Awesome! Any idea how to make the Load More button convert to a Show Less button that resets the load once all items are loaded?

[@CullenKuch]

Hey Emma! I tried to play around with this but couldn't come up with a solution. This may be a question for Finsweet as their code library is handling the behavior outside of our native Webflow controls.

[@emmamccanntravel]

@@CullenKuch Hi Cullen, I appreciate your attempt and your response! Thanks

[@ivanbadia3232]

great video but I have a question. When I use the Attributes on assets with interactions the new line items fail to load the interactions? I tried FS interactions reset but is not working as expected. Any solutions you may be able to share. I noticed your hover interaction works on your new row of actors after every 'Load More' click. TIA

[@CullenKuch]

Hey Ivan, that is odd. Perhaps it's the order in which you built it? I think I built out my whole collection of actors, added interactions, then implemented the Finsweet load more and limited the view to 3 at a time. So the interactions were there from the start. Did you maybe add them after the Finsweet attributes? Good luck!

[@ivanbadia3232]

@@CullenKuch thank you for your quick reply. I appreciate you taking the time to answer my question. I follow the same pattern but maybe there's something I'm doing wrong. Will have to test the structure to find my a solution. Thank you.

[@hagaitsidon3958]

i have the same problem

[@ivanbadia3232]

Hey Cullen, I just noticed you are using states (hover) for the rotate and box-shadow. The challenge is getting Attributes to work with Element trigger interactions.

[@ivanbadia3232]

Got it to work. If any item in a Collection List is using an interaction apply the Reset Interaction Attribute under the CMS Load more list of attributes. Name = "fs-cmsload-resetix", Value = "true".

[@joshmatjjen1341]

Quick Question: Is it possible to have Both Load more and Pagination Next and Prev Button Functionality?

[@CullenKuch]

Hey Josh, with the Finsweet Load More solution I don't think there is since it targets the native Webflow pagination element and essentially replaces it.

[@joshmatjjen1341]

@@CullenKuch Ok thanks for the info