I wanted to create an Enter viewport animation for the loop to have a behavior similar to the Reveal animation in Masonry. I didn’t apply the interactions directly to the Loop, because that would cause the interactions to repeat for the number of items in the loop. So I applied the interactions to the Loop’s parent container and targeted the Loop’s ID.
But there are two problems.
1- According to the screenshot below, if I set the ID as Css selector, the animation doesn’t run at all.
2- If I set the class, the animation will run, but only once.
regarding #1, the interaction will not run, because the element with that ID does not exist. If you check the frontend in dev tools, you will see that elements inside the loop do not have ID.
You are right about #1. I had not checked the front end. thank you🙏.
But about #2, please see this link. When the page loads, the animation works fine. But if you enable filters, the animation will not run anymore. But if I apply the interactions directly on the query loop, it works as expected.
ok, I understand what you mean. Now, about filters, I get 403 error when I try to filter on this link, so there has to be some limit or something, forbidding me from running filters.
But, I get what you mean, and I’ll mark this topic as a no-bug. The thing is, the interaction will run only if the element that has interaction defined “enters the viewport”. But, because that element is always there, it only works once.
So, as you already figured out, you can set the interaction for each child, and it will work.
If we set the interactions directly on the Loop, as you can see in the screenshot below, the interactions will be applied to each loop item in the front end. Is this the only solution?
