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-loading
class is added to the Collection List Wrapper. It is removed once the action completes.
fs-list
detects 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.
1 Like