nested-animations-no-cascade.twig

<p>An example of a fade--in-up (nested animated elements) no-cascadde type with <strong>duration long</strong>  and <strong>delay-long</strong> in inner elements, looped 50 times, triggered on scroll</p>
{% set image %}
  {% for i  in 1..3 %}
    {% include '@bolt-components-banner/banner.twig' with {
      content: 'this inner banner is delayed by 500ms',
      attributes: {
        class: [
          'a-bolt-base',
          'a-bolt-in',
          'a-bolt-in--fade-up',
          'a-bolt-duration-long',
          'a-bolt-delay-long'
        ],
      }
    } only %}
  {% endfor %}
{% endset %}
<bolt-grid gutter="small" row-gutter="medium">
{% for i in 1..50 %}
  {% set banner %}
    {% include '@bolt-components-banner/banner.twig' with {
      content: image,
      attributes: {
        class: [
          'a-bolt-base',
          'a-bolt-in',
          'a-bolt-in--fade-up',
          'a-bolt-duration-long'
        ],
      }
    } only %}
  {% endset %}
  <bolt-grid-item row-start="auto" row-span="auto" column-start="auto" column-span="4" valign="auto" class="u-bolt-padding-small">
    {{ banner }}
  </bolt-grid-item>
{% endfor %}
</bolt-grid>