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;

  width: 100%;
  height: 100%;

  &::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: scale(1, 1);
    }

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

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

  > .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: scale(0.5, 0.5);
    }

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

    @at-root .state-2 & {
      transform: scale(0.5, 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: scale(0.5, 1);
    }

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

    @at-root .state-2 & {
      transform: scale(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 {
  &::before {
    transform-origin: 100% 0;

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

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

    @at-root .state-2 & {
      transform: scale(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: scale(1, 1);
    }

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

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

.block-container {
  position: relative;
  width: 100%;
  max-width: 110rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;

  background-color: rgba(#000, 0.1);
}

.block-grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;

  .c-block-tr {
    grid-column: 3/4;
    grid-row: 1/3;
  }

  .c-block-br {
    grid-column: 2/4;
    grid-row: 3/3;
  }
}

// vim:set filetype=scss: