Supasaito Academy

Responsive CSS Staggered animations

The Code

<style>

/* PORTRAIT BREAKPOINT */
[fc-css-staggered = item]:nth-child(1n - 0) {
  transition-delay: 0ms;
}

/* LANDSCAPE BREAKPOINT */
@media screen and (min-width: 480px)
{
  [fc-css-staggered = item]:nth-child(2n - 1) {
    transition-delay: 0ms;
  }
  
  [fc-css-staggered = item]:nth-child(2n - 0) {
    transition-delay: 100ms;
  }
}

/* TABLET BREAKPOINT */
@media screen and (min-width: 768px)
{
  [fc-css-staggered = item]:nth-child(3n - 2) {
    transition-delay: 0ms;
  }

  [fc-css-staggered = item]:nth-child(3n - 1) {
    transition-delay: 100ms;
  }

  [fc-css-staggered = item]:nth-child(3n - 0) {
    transition-delay: 300ms;
  }
}

/* DESKTOP BREAKPOINT */
@media screen and (min-width: 992px)
{
  [fc-css-staggered = item]:nth-child(4n - 3) {
    transition-delay: 0ms;
  }

  [fc-css-staggered = item]:nth-child(4n - 2) {
    transition-delay: 100ms;
  }

  [fc-css-staggered = item]:nth-child(4n - 1) {
    transition-delay: 300ms;
  }
  
  [fc-css-staggered = item]:nth-child(4n - 0) {
    transition-delay: 600ms;
  }
}

</style>

How it works:

  1. 'n' is a number that can take all integer values starting from 1
  2. The number before 'n' is the number of columns within that breakpoint
  3. The number after minu sign (-) is the index of the current column(from the number of columns minus 1 to 0)

You can paste it into:

  1. Your "Global Styles" component.
  2. The "Inside <head> tag" section, within Page Settings — it will apply to the current page only.
  3. The "Head Code" section of the "Custom Code" tab of "Site Settings" — it will apply to the whole site.