styles.css

.header {
    height: 90vh;
    padding-top: 35vh;
    text-align: center;
    background-color: aquamarine;
}
.l-prose-blocks__block {
    position: relative;
    border-top: 1px solid red;
}

.l-prose-blocks__block + .l-prose-blocks__block {
    margin-top: 5em;
}

.l-prose-blocks__block * {
    transition: all 300ms ease-in-out;
}

.l-prose-blocks__block h1 {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	will-change: transform;
	backface-visibility: hidden;
    animation-delay: 300ms;
}

.l-prose-blocks__block img {
    width: 100%;
    height: auto;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	will-change: transform;
	backface-visibility: hidden;
}

.l-prose-blocks__block p {
    opacity: 0;
    position: absolute;
    padding: 0 2em;
    top: 25%;
}

.l-prose-blocks__block.is-visible h1,
.l-prose-blocks__block.is-visible img {
    animation: clipInToRight 600ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
    animation-delay: 300ms;
}

.l-prose-blocks__block.is-visible p {
    animation: visible 600ms ease-in-out forwards;
    animation-delay: 900ms;
}

@keyframes clipInToRight {
	0% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	99% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
	100% {
		clip-path: none;
	}
}

@keyframes visible {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}