victor-hugo/src/css/imports/components/block.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);
    }
  }
}
//
//
//
// vim:set filetype=scss: