I might do a separate video on this, but all you need to do for infinite scrolling is to use the modulus operator to return the remainder when dividing by your "page" size for each infinite scroll data load, e.g. change this: "style={{ "--animation-order": index } as any}" to this: "style={{ "--animation-order": index % this.pageSize } as any}". This will give the newly loaded items the correct delay and animation. Edit: Btw, I don't have anything against Angular animations - but people might not want to use Angular animations or might not be using Angular (as is the case in this video).
hey josh, i tried this in angular, and I can't seem to make it work. {{task.task}} animate-header is the class where the animation is. Please help mee. Thank you.
Since virtual scrolling relies on recycling DOM elements I would imagine this method (as well as the general SASS method) wouldn't work, but I haven't tried.
If you have infinite loader then this is not a good option. Better use angular stagger animation.
I might do a separate video on this, but all you need to do for infinite scrolling is to use the modulus operator to return the remainder when dividing by your "page" size for each infinite scroll data load, e.g. change this: "style={{ "--animation-order": index } as any}" to this: "style={{ "--animation-order": index % this.pageSize } as any}". This will give the newly loaded items the correct delay and animation.
Edit: Btw, I don't have anything against Angular animations - but people might not want to use Angular animations or might not be using Angular (as is the case in this video).
He's working from Stencil instead of Angular...
Great tutorial Morony, exactly i was searching... thank you...
hey josh, i tried this in angular, and I can't seem to make it work.
{{task.task}}
animate-header is the class where the animation is. Please help mee. Thank you.
Hi Surraj! I've tried too in angular and wasn't able to make it work.
Have you found a way to implement it in angular??
Thanks!!
how will this work with virtual scrolling? Before I had to use an interceptor observor but not sure now.
Since virtual scrolling relies on recycling DOM elements I would imagine this method (as well as the general SASS method) wouldn't work, but I haven't tried.
Hi @Josh. How may I contact you?
I have a contact page on my website