%fadein-slideup-animator {
  @media (prefers-reduced-motion: no-preference) {
    opacity: 0;
    transition-property: all;
    transition-timing-function: ease-in-out;

    .js [data-animator-optout] & {
      opacity: 1;
    }
  }
}

%fadein-slideleft-animator {
  @media (prefers-reduced-motion: no-preference) {
    opacity: 0;
    translate: 40px 0px;

    transition-property: all;
    transition-timing-function: ease-in-out;

    .js [data-animator-optout] & {
      translate: 0px 0px;
      opacity: 1;
    }
  }
}

%fadein-slideright-animator {
  @media (prefers-reduced-motion: no-preference) {
    opacity: 0;
    translate: -40px 0px;

    transition-property: all;
    transition-timing-function: ease-in-out;

    .js [data-animator-optout] & {
      translate: 0px 0px;
      opacity: 1;
    }
  }
}
