Hi Community,
I'm new in Motion.page and also in this community-forum.
Hope this is the right place for question about best-practice or problems to find the right approach.
Situation
I have develope a bricks framework website with a Loop trough different projects. Each project has a bunch of div-items wrapped in realated-dienstleistungen with class ".project__jobs-list" each of them with the class ".service-item" (see PrintScreen Bricks in the back).
I would like to stagger each ".service-item" so there is a smooth and soft appereance of each of them. This works fine. with the choosen settings in motion.page.
Problem
BUT without "trigger each iteration individually", ALL ".service-items" from ALL projects will start to animate, when the first Project-> ".project__jobs-list > .service-item" cross the startline at 78%.
So at project #3, #4, #5, ... -> all the ".service-item" are visible without any animation, because they have startet at the same time as project #1 was starting. And had ended before the browser was scralled to the Projects #3 +.
When I activate "trigger each iteration individually", then also project #3, #4, #5, + have a visible animation.
BUT the animation is now for every line starting depending from the scrolling-position, and when those are crossing the 78%-starting-line.
TRY-AND-ERROR
Have tried to find a solution with "group" the css selector with .project__jobs-list > .service-item".
But this makes no difference. When I untick the "stagger" then it works more smoove looked to the grouped items by project. BUT then all ".service-items" arise at the same moment (of course).
QUESTION:
Does anybody know a solution/approach/hack/workaround to group some items together to use them by a particular selector and use this to start the animation "with trigger each iteration individually" for this project-wise grouped items.
AND ALSO make it possible to stagger each under-item (.service-item) in this trigger-each-group-individually step by step??
WITHOUT having to create an individual timeline node for each project. This is a nonsensical undertaking with an "infinite" loop due to projects that are added later. (IMHO).
I have come across exactly the same problem in various situations. Also with blocks animeted in the same manner for desktop and Mobile (side by side in Desktop and amoug each other in tablet/mobile.
Would totally help if someone could send me a link to a suitable solution/workaround/hack or has a tip on how I could solve this with a better CSS selector or whatever.
Solution:
Thank to a helping hand from Thibaut in Facebook-Group I found I found the bug in my motion-animation or the bug in my head.
I made a try and used '.project-box .service-item' instead like before with '.project__jobs-list > .service-item'.
Now with this selector '.project-box .service-item' for the animations, the animation is project-box - wise as I liked.
