Animation with data-delay

Kirby 3 Solved ✅
1

Hi!

I am making an event list and want a smooth fade from top animation. I am making use of data-delay=“100”. This works exactly how I want it as html. I am making use of multiply of 100 for the delay. For example:

data-delay=“100”
data-delay=“200”
data-delay=“300”
etc.

Can anyone advice me how I can achieve this dynamically?

<div class="col-lg-4 fade-from-top" data-delay="100">
                        <div class="event">
                            <div class="event date">Aug 20, 2019</div>
                            <h3 class="event title"><a href="/">Title event </a></h3>
                            <div class="event location"><i class="icomoon-pin"></i> New York, US</div>
                        </div>
                    </div>

Thanks!

2

Multiple based on what? In a loop? Somehow there is some information missing.

3

I mean: first item data-delay:100, second item data-delay:200, third item data-delay:300 etc.

4

Could you please post your complete loop code?

5 
    <section class="section events-list">
        <div class="container">
            <div class="row">
              <?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $note): ?>
                <div class="col-lg-4 fade-from-top" data-delay="100">
                    <div class="event">
                        <div class="event date"><time><?= $note->date()->toDate('d F Y') ?></time></div>
                        <h3 class="event title"><a href="<?= $note->url() ?>"><?= $note->title() ?></a></h3>
                        <?php if($note->location()->isNotEmpty()) : ?>
                          <div class="event location"><i class="icomoon-pin"></i> <?= $note->location() ?></div>
                        <?php endif ?>       
                    </div>
                </div>
                <?php endforeach ?>
6 
<?php 
$notes = $page->children()->listed()->sortBy('date', 'desc');
foreach ($notes as $note): ?>
<div class="col-lg-4 fade-from-top" data-delay="<?= ($notes->indexOf($note)+1)*100 ?>">
    <div class="event">
        <div class="event date"><time><?= $note->date()->toDate('d F Y') ?></time></div>
        <h3 class="event title"><a href="<?= $note->url() ?>"><?= $note->title() ?></a></h3>
        <?php if($note->location()->isNotEmpty()) : ?>
          <div class="event location"><i class="icomoon-pin"></i> <?= $note->location() ?></div>
        <?php endif ?>       
    </div>
</div>
<?php endforeach ?>
7

Thank you very much for your help!
I needed to change $notes to $note to get it working.

“<?= $notes->indexOf($note)*100 ?>”`

to

“<?= $note->indexOf($note)*100 ?>”

8

That doesn’t make sense…

9

it gives me a error with notes

Whoops \ Exception \ ErrorException (E_NOTICE)

Undefined variable: notes

10

There is an error because I forgot that the first index is 0, not 1, so you have to change the line to

<div class="col-lg-4 fade-from-top" data-delay="<?= ($notes->indexOf($note)+1)*100 ?>">

Other than that the code above should be OK.

If the variable is not defined, you didn’t copy my code as is with the variable definition. I defined $notes in this line:

$notes = $page->children()->listed()->sortBy('date', 'desc');
11

Thank you so much :pray: