Streaming live at 10am (PST)

Pagination causing trouble with animated header on homepage

I have installed pagination for a Real Estate site I created and manage on the home page for new listings (which change all the time and now I don’t have to manually update with my custom slider)
PROBLEM:
When you use the pagination tool on the homepage to view listings the animated header in the hero section disappears.

36

47


Here is my site Read-Only:

https://preview.webflow.com/preview/allisons-website?utm_source=allisons-website&preview=245a8c411162c2f6d99faa2bb7c3d200

Hi, @Juniper_Smith! Welcome to the forums and thanks so much for posting!

I see that you’re using the seamless pagination solution that @forresto posted here in the forums.

I know he added three lines of code to reinitialize IX2, but it doesn’t seem to work on page load interactions.

This isn’t a bug, since this is a custom code implementation, so I’m moving this over to the custom code category. I’m hoping one of our awesome community members will be able to help you track down a solution! :slight_smile:

@rileyrichter Thank you!

  $(document).on('pjax:end', function() {
    Webflow.require('ix2').init();
  });

:point_up:
These lines are resetting your header animation to the initial state.
:point_down:

image

The “pjax” custom code prevents the page from unloading: it replaces only the paginated list section that changes. So the page load animation doesn’t get triggered to start.

If you’re not going to add interactions, removing those lines should fix this issue. The downside is that interactions (in the paginated list) won’t work.

Does that work for you?

1 Like

@forresto Thanks for the reply, just to clarify if I remove those two lines of code will header still be there when someone uses the pagination? I am not as concerned with animation restarting as I am having the header there when people move around through the pagination and return to the top of the page and return to the top of the page afterwards.

@forresto BTW thanks for the seemless pagination solution as it is ideal for my scenario. I just hope I can get the header to remain.

Thank you

Yes! I tried it, and it works.

“init” is what you don’t want in your case, as it takes the page load animation back to the initial state, but doesn’t trigger it to play.

Sweet site BTW. :ok_hand:

@forresto It worked! Thank you so much!!!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.