Filters with "Reset Animation" Attribute from Load More function not working together

[ryan1]

Hi all,

I’m having some problems when working with the filter and load more functions on Webflow
They working well together but when I add the “reset animation” of the load more
The page crashed every time I tried each of them (The page just became blank)
Here is the read-only link: Webflow

Just a test page I created for this purpose

You can see the page is crashing right now but will work normally if you remove the fs-cmsload-resetix=true attribute

Thanks

[Support-Luis]

Hey @ryan1! The issue comes from using initial states for the items interactions. We suggest you simulate this state by using the effects panel as the Attribute will reset the interactions engine and all items on the page will revert to this initial state.

[ryan1]

Hi

Thanks for your reply
But I’m not sure if it’s the case
You can check in the review only link
I remove all the interaction on the page now and the load more button stilll not working
It’s working when I remove the filter function or the opposite

https://belo-5a4b49-9a62c80562b98-c059e375f7383.design.webflow.com/?p=66178a3990d842324be19232&locale=en&pageId=66178a3cc30672cf63e3766b

Please use the blog test page

Thanks

[Support-Luis]

Hey @ryan1! You sent the designer link, I can not access it

Can you share a read-only link, please?

[ryan1]

Hi Luis

Here is the link:
https://preview.webflow.com/preview/belo-5a4b49-9a62c80562b98229d22bad4daba?utm_medium=preview_link&utm_source=dashboard&utm_content=belo-5a4b49-9a62c80562b98229d22bad4daba&preview=0f08551ce038e67fcea294a0afa69e14&workflow=preview

Thanks

[Support-Luis]

Hey @ryan1! I am afraid you do have several elements with an initial state defined. And this is causing the issue. You can test this yourself by opening the console and pasting this snippet to manually reset the interactions engine

window.Webflow && window.Webflow.destroy();
window.Webflow && window.Webflow.ready();
window.Webflow && window.Webflow.require( 'ix2' ).init();
document.dispatchEvent( new Event( 'readystatechange' ) );

I also noticed you have the CMS Filter script twice on the page, this may cause a content flash when filtering the items. And you are missing a defined fs-cmsload-mode on your collection list. Please add and test the snippet above. You’ll see new items rendered after the animations are done.

Remember that fs-cmsload-resetix resets ALL interactions present on he page, it is not limited to the item interactions only.

[ryan1]

Hi @Support-Luis
This seems to be working
Many thanks for that
Now I’m actually facing a different problem
I want to use the Show Query (fs-cmsfilter-showquery) for the CMS filter
Which is working as it adds the query to the URL
But then when I try to use that link, for example, belvercreative.com.au/works/cms-filter?categories=digital
It stops the animation and the page from loading (basically the page freezes when loaded)

If we open the page that is prefilled (with the categories query in the URL) and has more than 6 projects at the start (more than 6 projects in that category) and therefore shows the load more button, this issue not happening and the page loading normally

So this only happens in the scenario where we open the link that has less project than the setting of pagination (which is 6) at the start

Here is the link: Webflow - Belver Creative

Please use the Our Work Copy page to test
Thanks

[Support-Luis]

Hey @ryan1 could you share a link where this breaks? Or a quick loom?

[ryan1]

Hi Luis
The problem right now is that some of the animation at the top not working anymore
When we load the initial page:
Our Work?
Everything working fine here

But when we add the anchor to the URL using “fs-cmsfilter-showquery”
The new link with the anchor isn’t loading the top animation, for example, this link
https://belver-creative.webflow.io/our-work-copy?category=DIGITAL

Before when I load the link with “category=DIGITAL” query it’s working fine as that was the only page that has more than 6 projects so we have the load more button at the start, but now it breaks too

I have a quick Loom here:

You already had my read-only link above

Thanks

[Support-Luis]

Hey @ryan1! It all comes down to these interactions’ initial states that you use for at least these interactions.

The initial states will not work with the query param, as this loads the page with the filters applied there is a renderitems event firing before you see the items. This resets the animations to their initial states which breaks them.

If you only have 6 items to filter, you can remove the CMS Load setup and avoid paginating the elements.

I can assure you the issue will disappear with this approach

[ryan1]

Hi Luis

Thanks for your reply
But as I mentioned before
I removed all the initial state for the page
You are on Our Work page which still have them
We are testing on Our Work Copy page which doesn’t have any initial state on the animation anymore
Can you please have a look again on the correct page that I mentioned?

Thanks
Ryan

[Support-Luis]

Hey Ryan!

I recorded a quick loom, maybe it’ll help show why I believe there might be some initial states left on the page.

As I mentioned in the video, if you are using any other interaction/animation script please let me know and we will integrate it into the setup.

[ryan1]

Hi Luis

Thanks so much for your reply
Sorry for going around on this but I still can’t seem to fix the problem now

I record a quick loom to show it, now when I surely remove all the animation with the initial state on the page but animations still not running

• Some animations use the same animation but some are running while some are not (the heading at top and the CTA)
• Some elements don’t have the initial state set but the first animation at 0s is mainly to go around when removing the initial state also seem to be not working (the filter)

I created a separate page (Our Work Test) that only has the listing and the elements that I mentioned so you can test it out
If you able to have a look on this that would be great but I’m sure there’s no element with the initial state on the page anymore

I would prefer if we have some code to reset the animation every time we land on the page or a different way to fix this quickly as I suspect the way that I do the trick to go around the initial state not working (set the first animation at 0s) but changing this will lead to change all the animation on the page which is not ideal and taking a lot of time so hope we can find a way around this quicker

Appreaciate the help so far and hope we can get this out soon

Many thanks

Ryan

[ryan1]

HI Luis

Also we just noticed this problem
We have this showing image animation which basically shows/hides a black div at to reveal the image which working fine with the load more
But when we use the filter

• If we don’t scroll down a specific project before using the filter, you can try not revealing PLN project for example, and use the filter Graphic Design, you can see PLN is not showing as the Scroll Into View triggering seems to not working, but when we get back to “All”, we can still have that working normally
• All the project that is part of the load more projects (from 7th) is also having the same problem, when we not hitting the load more yet but use the filter, it will show some of the project that not belong to the first 6s and those new is not animating

I don’t think there is any reset animation attribute for the filter itself so not sure how can we fix it, please use the “Our Work Copy” page to see this problem

Thanks

[Support-Luis]

Hey @ryan1! We might be getting somewhere, I have tried removing the fs-cmsload-resetix = true attribute from the list and instead using this snippet that hard resets Webflow’s interaction engine

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;

      document.addEventListener('readystatechange', (e) => {
        console.log(e);
        console.log('animation reset');
      });

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        window.Webflow && window.Webflow.destroy();
        window.Webflow && window.Webflow.ready();
        window.Webflow && window.Webflow.require('ix2').init();
        document.dispatchEvent(new Event('readystatechange'));
      });
    },
  ]);
</script>

Although not ideal, we can see the items being animated as they should.

I will keep looking for a fix but wanted to let you know about this.

Also, I noticed a Jetboost script on the page, this might be interfering with our Attributes script. What are you trying toa achieve with Jetboost?

[ryan1]

Thanks Luis

This is obviously not ideal as it works on some animation but not the other, so we will wait for your team to come back with a better solution on this

This is the only issue that we have on the page at the moment before we can get the page live, so we really need to get this through.

We appreciate all the work and effort but we been fixing this for quite long now

So hopefully we can get a thoughful solution on this

Many thanks for spending time
Ryan

[ryan1]

Hi @Support-Luis

We want to follow up on this
It’s been a while and we haven’t got back from the team

How are u processing with this and is there a potential for a solution anytime soon?

Thanks

[Support-Luis]

Hello Ryan!

There have been no updates yet as we are focused on development for Attributes V2.

We can try something on your end that has worked sometimes for other users. This is rebuilding the page from scratch, keeping in mind the issues that come with using initial states on interactions.

[ryan1]

Hi @Support-Luis

Thanks for your reply
So are the team still working on this now
Or we have to wait until you launch the Attributes V2?

[Support-Luis]

I would recommend waiting until V2 is released as bug fixes will be the priority after its release.

I apologize for the inconvenience.