#dummy {
  overflow: clip;

  > p { position: relative; }
  .base { height: 30vh; }
  .gere, .roberts {
    position: absolute;
    translate: -50%;
    opacity: 0;
    animation: opaque linear both;
    animation-range: 50% 60%;
    animation-timeline: view();
  }
  .gere {
    height: 25vh;
    top: -2vh;
    left: calc(50vw - 14vh);
  }
  .roberts {
    scale: -1 1;
    height: 35vh;
    top: 2vh;
    left: calc(50vw + 14vh);
  }
}

#trying {
  opacity: 0;
  animation: opaque linear both;
  animation-range: 40% 50%;
  animation-timeline: view();
}

@keyframes opaque {
  to { opacity: 1; }
}