I have an ACF repeater through which I output cards. Added spawn animation to cards. I need an animation delay of 100 more than the previous one for each card. How can i do this?
<ul data-aos="zoom-in" >
<?php if (have_rows('cards')) :
while (have_rows('cards')) : the_row();
$delay = 300; ?>
<li data-aos-delay="<?php echo $delay ?>">
<img src="<?php the_sub_field('card_icon'); ?>" alt="">
<h3>
<?php the_sub_field('card_title'); ?>
</h3>
<p>
<?php the_sub_field('card_text'); ?>
</p>
</li>
<?php endwhile;
endif; ?>
</ul>
CodePudding user response:
You can define the initial value of $delay
outside your while
loop, then increment it within the loop:
<?php if (have_rows('cards')) :
$delay = 200;
while (have_rows('cards')) : the_row();
$delay = 100; ?>
Note the initial value of 200 instead of 300, because it will be incremented by 100 for the first card as well to ensure that has the initial delay of 300.