Animate only one item at a time

[midaspider]

Lets say for example you have a group of items that are arranged in a grid set to wrap, depending on view width they are arranged so that 2, 3 or 4 items make up a row.

Currently all items in a row animate at the same time because they all come into view at the same time.

I wanted to get those 2, 3 or 4 items (per row) that come into view together to animate sequentially, is this possible?

[rpocklin]

There's many different ways you could approach it, probably the best is to add a delay to the animation which is based on the column index (ie. bigger column index, bigger delay) since the animation functions for each row will all be triggered at the same time.

[midaspider]

I created a scss mixin to add the delay to variable nth items so you can use it on a grid with responsive columns:

@mixin nth-delay($nth) {
    @for $i from 1 through $nth {
        &.fadeInUp:nth-child(#{$nth}n+#{$i}) { 
            -webkit-animation-delay: $i * 150ms;
            -moz-animation-delay: $i * 150ms;
            animation-delay: $i * 150ms;
        }
    }
}

...which can be used as per below:

@media ($layout-breakpoint-sm-has-2-columns) {
    @include nth-delay(2);
 }
@media ($layout-breakpoint-sm-has-3-columns) {
    @include nth-delay(3);
 }
@media ($layout-breakpoint-lg-has-4-columns) {
    @include nth-delay(4);
 }

It seems to work pretty well, making each item in a row animate sequentially. However if you scroll down quite quickly, several rows of sequentially animated items will animate at the same time.