stagger elements | WordPress.org

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.

Hi, thank you very much for your guidance! Very useful, I didn’t know about WP_HTML_Tag_Processor.

I was writing an incredible long answer haha, but I finally find the solution by myself: It was the priority value of the filter, I changed it to 10 and works, whil in 9 it didn’t work.

BTW, I make it more specific by adding a css class “staggered-posts” to the post template block, and checking that class in the conditional statement.

&& ! empty( $block['attrs']['className'] )
&& 'staggered-posts' === $block['attrs']['className']