Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animate only one item at a time #18

Open
midaspider opened this issue Jul 30, 2016 · 2 comments
Open

Animate only one item at a time #18

midaspider opened this issue Jul 30, 2016 · 2 comments

Comments

@midaspider
Copy link

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
Copy link
Owner

rpocklin commented Jul 31, 2016

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants