Infinite scroll with dynamic data

Hey guys,

I’m trying to create a blog with infinite scroll so that the posts auto-load and the user can scroll endlessly between them.

I’ve read the infinite scroll tutorial on the forum, but can’t seem to think of a way to apply it to dynamic data… Namely, it asks you to link to the pages you want to be scrolled to at the bottom on each of the individual blog pages - I don’t think this is possible with the CMS as you can’t link directly to specific pages in the blog post template page.

Can anyone think of a workaround for this? Or is this just a limitation of dynamic data that we can’t really overcome?

It would be great if you could link to ‘next post’, but I’m not sure if that’s possible.

Any help would be really appreciated, cheers!

@MatthewRose The Webflow team are currently working on pagination which is a much needed feature which would solve the issue you’re currently having. However there isn’t a definitive release date, just the typical it’ll be done when it’s done.

@fsociety79 ok that’s great to know, thanks for the info

@MatthewRose Thinking through your problem again and I think this can be done using collection templates, but you’ll have to add the pagination buttons in manually until the pagination feature is released.

  1. Create a page for all posts, for example posts 1-10 for page 1, posts 11-20 for page 2, etc.

  2. For each post title click through create a separate collection template with data coming from the CMS. By doing this you’ll have access to a URL such as http://www.yourdomain.com/blog/blog-post-title-slug.

  3. The bottom most element for the CMS should be a styled button or link with the next post as the text and it will link to the previous URL.

I hope this makes sense and prove to be a good enough workaround.

@fsociety79 Thanks for thinking about this again!

I think I know what you’re describing, but I haven’t been able to make it work just yet - I’ll keep playing around and let you know if I crack it!

@MatthewRose I’ll put something together later today, make it public and post the link.

@fsociety79 that would be amazing, thank you

@MatthewRose I’ve just been playing around with Webflow and this can be achieved by firstly creating your collections in the format [01-10, 11-20, 21-30, …] as individual pages (or as many blog posts you’d like in a summarised format).

Each one of these collections would use a normal page with the dynamic content object which will output your posts in chronological order from earliest at the bottom to latest at the top.

Then you will need to create a template for your individual blog post which will then be attached to each collection as a collection template as normal. My recommendation would be to create symbols for the majority of your page elements as each collectio template would have to be copied over.

I hope all of this makes sense and you can get this to work.

@fsociety79 thanks for getting back on this!

I think I understand what you’re explaining, but is there any way you could share the site so I could have a closer look and replicate?

Thank you