<section class="hero hero__create">
  <div class="create-mask mask1"></div>
  <div class="part-holder1">
    <div class="create part1"></div>
  </div>
  <div class="create-mask mask2"></div>
  <div class="part-holder2">
    <div class="create part2"></div>
  </div>
  <div class="create-mask mask3"></div>
  <div class="part-holder3">
    <div class="create part3"></div>
  </div>
</section>

<div class="replay-holder">
  <button class="replay">Press me to replay</button>
</div>
@mixin position($img-width, $img-height, $part-width, $part-height, $part-number) {
  $width: calc(#{$part-width}/#{$img-width}*100);
  $height: calc(#{$part-height}/#{$img-height}*100);
  $bg-size-x: calc(100% * (100 / #{$width}));
  $bg-size-y: calc(100% * (100 / #{$height}));
  $top: calc(#{$part-number} * 100%/#{$img-height}*200);
  $left: calc(#{$part-number} * 100%/#{$img-width}*200);
  width: calc(1% * #{$width});
  height: calc(1% * #{$height});
  top: $top;
  left: $left;
  background-size: calc(#{$bg-size-x}) calc(#{$bg-size-y});
}

.hero__create {
  &.hero-active {
    .create-mask {
      opacity: 0;
      &.mask1{
        transition: opacity .5s linear 1.15s;
      }
      &.mask2{
        transition: opacity .15s linear .45s;
      }
      &.mask3{
        transition: opacity .15s linear .15s;
      }
    }
    .create.part1 {
      transition: transform 4.3s linear 1.15s;
      transform: scale(1.4);
    }
    .create.part2 {
      transition: transform 5s linear .45s, background-position 5s linear .45s;
      transform: scale(1.3);
      background-position: 25% 50%;
    }
    .create.part3 {
      transition: transform 5.3s linear .15s;
      transform: scale(1.2);
    }
  }
  .create {
    background: url('https://i.ibb.co/wdTy2GD/recreate.jpg') no-repeat;
  }
  .part-holder {
    &1 {
      overflow: hidden;
      position: absolute;
      top: calc(0 * 100%/1440*200);
      left: calc(0 * 100%/2560*200);
      width: calc(1% * calc(2560/2560*100));
      height: calc(1% * calc(1440/1440*100));
    }
    &2 {
      overflow: hidden;
      position: absolute;
      top: calc(1 * 100%/1440*200);
      left: calc(1 * 100%/2560*200);
      width: calc(1% * calc(2120/2560*100));
      height: calc(1% * calc(1020/1440*100));
    }
    &3 {
      overflow: hidden;
      position: absolute;
      top: calc(2 * 100%/1440*227);
      left: calc(2 * 100%/2560*227);
      width: calc(1% * calc(1600/2560*100));
      height: calc(1% * calc(530/1440*100));
    }
  }
  .create-mask {
    opacity: 1;
    background: url('https://i.ibb.co/4ZrRjry/recreate-mask.jpg') no-repeat;
  }
  .create,
  .create-mask {
    position: absolute;
    &.mask1 {
      @include position(2560, 1440, 2560, 1440, 0);
      z-index: 2;
    }
    &.part1 {
      @include position(2560, 1440, 2560, 1440, 0);
      z-index: 1;
    }
    &.mask2 {
      @include position(2560, 1440, 2120, 1020, 1);
      z-index: 3;
    }
    &.part2 {
      @include position(2560, 1440, 2560, 1440, 1);
      background-size: 120.75% 141.18%;
      background-position: 50% 50%;
      z-index: 2;
    }
    &.mask3 {
      @include position(2560, 1440, 1600, 530, 2);
      top: calc(2 * 100%/1440*227);
      left: calc(2 * 100%/2560*227);
      z-index: 4;
    }
    &.part3 {
      @include position(2560, 1440, 2560, 1440, 2);
      background-size: 160% 271.7%;
      background-position: 50% 50%;
      z-index: 3;
    }
  }

  @for $i from 1 to 4 {
    .create.part#{$i}{
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
    }
  }
}

.replay{
  transition: opacity 1s ease;
  font-size: 16px;
  display: none;
  position: absolute;
  top: 1%;
  right: 1%;
  z-index: 5;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: none;
  background: #fff;
  &:hover{
    opacity: 0.6;
  }
}
View Compiled
const $holder = $('.hero');
const $button = $('.replay');
const $window = $(window);
const ACTIVE = 'hero-active';

const animation = () => {
  const $delay = 1000;

  $window.on('load', () => {
    setTimeout(() => {
      $holder.addClass(ACTIVE);
    }, $delay);
  });
};

animation();

const replay = () => {
  const $delay = 5000;
  $window.on('load', () => {
    setTimeout(() => {
      $button.css({
        display: 'flex',
        width: '120px',
      });
    }, $delay);
  });
  $button.on('click', () => {
    $holder.removeClass(ACTIVE);
    $button.css({
      display: 'none',
    });
    setTimeout(() => {
      $holder.addClass(ACTIVE);
    }, 100);
    setTimeout(() => {
      $button.css({
        display: 'flex',
        width: '100px',
      });
    }, $delay);
  });
};

replay();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js