Title: stagger elements
Last modified: December 15, 2023

---

# stagger elements

 *  Resolved [mafsdisseny](https://wordpress.org/support/users/capiedge/)
 * (@capiedge)
 * [2 years, 5 months ago](https://wordpress.org/support/topic/stagger-elements/)
 * Is there any possibility to stagger elements?
   I’m using generatepress and generateblocks,
   and when you create a query loop block, you can only define the animation for
   one post (it’s like a pattern that is used for the rest of the query), so I can’t
   even define different delays to achieve the stagger effect.
 * Maybe you can guide me in how to achieve it?
   Thanks and congrats for the nice
   integration with gutenberg blocks and the pretty ui/ux interface, it’s brilliant!

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [websevendev](https://wordpress.org/support/users/websevendev/)
 * (@websevendev)
 * [2 years, 5 months ago](https://wordpress.org/support/topic/stagger-elements/#post-17281405)
 * > 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:
 *     ```wp-block-code
       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.
 *  Thread Starter [mafsdisseny](https://wordpress.org/support/users/capiedge/)
 * (@capiedge)
 * [2 years, 5 months ago](https://wordpress.org/support/topic/stagger-elements/#post-17282698)
 * 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']

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘stagger elements’ is closed to new replies.

 * ![](https://ps.w.org/animations-for-blocks/assets/icon-256x256.png?rev=2587511)
 * [Animations for Blocks](https://wordpress.org/plugins/animations-for-blocks/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/animations-for-blocks/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/animations-for-blocks/)
 * [Active Topics](https://wordpress.org/support/plugin/animations-for-blocks/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/animations-for-blocks/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/animations-for-blocks/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [mafsdisseny](https://wordpress.org/support/users/capiedge/)
 * Last activity: [2 years, 5 months ago](https://wordpress.org/support/topic/stagger-elements/#post-17282698)
 * Status: resolved