stagger elements

I’m using generatepress and generateblocks

Sorry, no clue about that stuff.

when you create a query loop block, you can only define the animation for one post … I can’t even define different delays to achieve the stagger effect.

Do you use core WordPress Query Loop block? In which case don’t add an animation to the Post Template block inside the query (it behaves oddly), instead, wrap the contents of the Post Template block in a Group (or any other) block and add an animation to that.

Here is an example how you could stagger the animations using “render_block” filter:

add_filter('render_block', function($block_content, $block, $wp_block) {

	if(
		$block['blockName'] === 'core/group'
		&& isset($block['attrs'])
		&& isset($block['attrs']['animationsForBlocks']['animation'])
		&& !empty($block['attrs']['animationsForBlocks']['animation'])
		&& $block['attrs']['animationsForBlocks']['animation'] !== 'none'
		&& isset($block['attrs']['animationsForBlocks']['delay'])
		&& isset($wp_block->context['postId'])
	) {

		static $delay = 0;
		if($delay === 0 && isset($block['attrs']['animationsForBlocks']['delay'])) {
			$delay = $block['attrs']['animationsForBlocks']['delay'];
		} else {
			$delay += 500;
			$delay = min($delay, 3000);
		}

		$tags = new WP_HTML_Tag_Processor($block_content);
		if($tags->next_tag()) {

			if(!$tags->get_attribute('data-aos')) {
				return $block_content;
			}

			$tags->set_attribute('data-aos-delay', (int)$delay);

			return $tags->get_updated_html();
		}
	}

	return $block_content;
}, 9, 3);

Basically, this takes any Group block that has an animation and is inside a query and increments its’ delay by 500.