The stagger-in animation was working properly for me earlier in my development, but now I can’t get to work.
I have added GSAP to the site, but even when I comment-out/remove it entirely from the site, the stagger isn’t returning, so it’s not a conflict there.
Here’s an example page where the CMS Load stagger effect has stopped working:
Hey @stephen! Attributes V2 comes with way more control over the animations used on the list.
Let me know if you’d like to wait for it’s release to migrate and try with the new animations or if you’d like to debug and keep the current setup.
Attributes V2 is releasing in a couple of days.
Can you share where I can find more information on v2 Animations? On List Sort and Load pages it mentions:
Please refer to the List Sort and List Load documentation pages for animating the List when it’s sorted or loaded.
But I don’t see any information on animations
Hey @yousufalich93! You can now have separate animations for the list depending on the event that is triggered.
Extract from the List Load documentation
When a list is filtered—or sorted, or paginated—temporary classes are applied to the Collection List Wrapper to trigger transitions or animations, and then removed once the action completes.
This system supports per-action animation, per-item staggering, and precise control via CSS.
- During a load action, the
.is-list-loadingclass is added to the Collection List Wrapper. It is removed once the action completes.fs-listdetects any CSS transitions triggered by the class and waits for them to finish before updating the list.- The class can be renamed using the attribute
fs-list-loadingclass
By default, we are using the .is-list-loading class for loading animations, .is-list-sorting for sorting and .is-list-filtering for filtering events, you can use you own class by defining it on the fs-list-loadingclass = CLASS_NAME, fs-list-sortingclass = CLASS_NAME and fs-list-filteringclass = CLASS_NAME attributes.