victor-hugo/src/css/imports/blocks.scss

$duration: 1s;
$delay: 0.3s;

$transition-img-in: opacity $duration $delay ease-in, transform $duration;
$transition-img-out: opacity $duration $delay ease-out, transform $duration;

@mixin img-in {
  transition: $transition-img-in;
  opacity: 0.5;
  transform: none;
}

@mixin img-out {
  transition: $transition-img-out;
}

.c-block::before,
.c-block__img {
  @include abs-full;
}

.c-block {
  z-index: 1;
  position: relative;
  overflow: hidden;
  &::before {
    //will-change: transform;
    z-index: 1;
    content: "";
    transition: transform $duration;
    background-color: currentColor;
  }

  > .c-block__img {
    z-index: 2;
    //will-change: opacity, transform;
    background-size: cover;
    background-position: center;
    opacity: 0;
  }
}

.c-block--1 {
  &::before {
    transform-origin: 100% 100%;

    @at-root .state-0 & {
      transform: scale3d(1, 1, 1);
    }

    @at-root .state-1 & {
      transform: scale3d(0.5, 1, 1);
    }

    @at-root .state-2 & {
      transform: scale3d(0.5, 0.5, 1);
    }
  }

  > .c-block__img {
    transform-origin: 0 0;

    @at-root .state-0 & {
      @include img-in;
    }

    @at-root .state-1 & {
      @include img-out;
      transform: translate(50%, 0) scale(1.3);
    }

    @at-root .state-2 & {
      transform: translate(50%, 50%) scale(2);
    }
  }
}

.c-block--2 {
  &::before {
    transform-origin: 100% 0;

    @at-root .state-0 & {
      transform: scale3d(0.5, 0.5, 1);
    }

    @at-root .state-1 & {
      transform: scale3d(1, 1, 1);
    }

    @at-root .state-2 & {
      transform: scale3d(0.5, 1, 1);
    }
  }

  > .c-block__img {
    transform-origin: 0 100%;

    @at-root .state-0 & {
      transform: translate(50%, 50%) scale(2);
    }

    @at-root .state-1 & {
      @include img-in;
    }

    @at-root .state-2 & {
      transform: translate(50%, 0) scale(1.3);
      @include img-out;
    }
  }
}

.c-block--3 {
  &::before {
    transform-origin: 100% 0;

    @at-root .state-0 & {
      transform: scale3d(0.5, 1, 1);
    }

    @at-root .state-1 & {
      transform: scale3d(0.5, 0.5, 1);
    }

    @at-root .state-2 & {
      transform: scale3d(1, 1, 1);
    }
  }

  > .c-block__img {
    transform-origin: 0 100%;

    @at-root .state-0 & {
      @include img-out;
      transform: translate(50%, 0) scale(1.3);
    }

    @at-root .state-1 & {
      transform: translate(50%, 50%) scale(2);
    }

    @at-root .state-2 & {
      @include img-in;
    }
  }
}

.c-block--4 {
  height: 24rem;

  &::before {
    transform-origin: 100% 0;

    @at-root .state-0 & {
      transform: scale3d(0.33, 1, 1);
    }

    @at-root .state-1 & {
      transform: scale3d(0.33, 0.25, 1);
    }

    @at-root .state-2 & {
      transform: scale3d(1, 1, 1);
    }
  }

  > .c-block__img {
    transform-origin: 0 100%;

    @at-root .state-0 & {
      @include img-out;
      transform: translate(66.6%, 0) scale(1.3);
    }

    @at-root .state-1 & {
      transform: translate(66.6%, 66.6%) scale(2);
    }

    @at-root .state-2 & {
      @include img-in;
    }
  }
}

.c-block--5 {
  &::before {
    transform-origin: 100% 100%;

    @at-root .state-0 & {
      transform: scale3d(1, 1, 1);
    }

    @at-root .state-1 & {
      transform: scale3d(0.5, 1, 1);
    }

    @at-root .state-2 & {
      transform: scale3d(0.5, 0.5, 1);
    }
  }
}

// vim:set filetype=scss: