<section class='grid'>
  <div></div>
  <div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, commodi inventore aliquam odio excepturi eum repellat quas necessitatibus velit reiciendis eaque dolores, voluptatibus ratione. Eos quisquam nesciunt veniam dolores quia.</p>
  <p>Accusamus porro accusantium recusandae nulla ea nemo incidunt praesentium facere! Esse atque inventore cumque aperiam provident ad est culpa omnis enim totam? Provident ipsa accusantium fuga ipsam asperiores, officia tempora.</p>
  <p>Iure eius asperiores quia? A distinctio officia voluptates necessitatibus, fugiat voluptatum officiis fugit ducimus consequuntur totam error enim quos. Architecto cupiditate nam cumque placeat autem atque sapiente iste facilis consequuntur!</p>
  <p>Alias deserunt laudantium, quam accusantium quos nulla consequatur rerum dolorem enim praesentium aut officia quod error eligendi quis assumenda reiciendis quasi? Laudantium quod provident hic dolor alias. Nostrum, provident ex.</p>
  <p>Voluptatem, eum? Possimus magni suscipit delectus sed corrupti porro ea neque fuga? In pariatur omnis labore atque hic rem officiis reprehenderit iste nihil, quae accusantium inventore obcaecati corrupti quis eaque.</p>
  <p>Et neque excepturi laudantium quisquam est deleniti dolore aliquid nobis placeat impedit ducimus saepe omnis, libero in voluptates debitis unde odio. Rerum illo adipisci deserunt, delectus ratione quam atque alias!</p>
  <p>Praesentium fugiat iste dolorem. Reiciendis voluptatum natus vel pariatur consequuntur perspiciatis quaerat dolorem nisi. Dignissimos eaque ipsa commodi amet, corrupti earum eos voluptatibus atque nulla labore aspernatur architecto cumque quaerat.</p>
  <p>Molestias earum aliquam accusamus pariatur. Veniam eum, dolorem quaerat totam illo ipsum quibusdam doloribus soluta incidunt odio odit explicabo sunt nostrum, commodi esse ducimus voluptates quam architecto perferendis quia error.</p></div>
</section>

<section class='grid has-pullquote'>
  <div>
    <blockquote>
      Passersby were amazed by the unusually large amounts of blood.
    </blockquote>
  </div>
  <div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, commodi inventore aliquam odio excepturi eum repellat quas necessitatibus velit reiciendis eaque dolores, voluptatibus ratione. Eos quisquam nesciunt veniam dolores quia.</p>
  <p>Accusamus porro accusantium recusandae nulla ea nemo incidunt praesentium facere! Esse atque inventore cumque aperiam provident ad est culpa omnis enim totam? Provident ipsa accusantium fuga ipsam asperiores, officia tempora.</p>
  <p>Iure eius asperiores quia? A distinctio officia voluptates necessitatibus, fugiat voluptatum officiis fugit ducimus consequuntur totam error enim quos. Architecto cupiditate nam cumque placeat autem atque sapiente iste facilis consequuntur!</p>
  <p>Alias deserunt laudantium, quam accusantium quos nulla consequatur rerum dolorem enim praesentium aut officia quod error eligendi quis assumenda reiciendis quasi? Laudantium quod provident hic dolor alias. Nostrum, provident ex.</p>
  <p>Voluptatem, eum? Possimus magni suscipit delectus sed corrupti porro ea neque fuga? In pariatur omnis labore atque hic rem officiis reprehenderit iste nihil, quae accusantium inventore obcaecati corrupti quis eaque.</p>
  <p>Et neque excepturi laudantium quisquam est deleniti dolore aliquid nobis placeat impedit ducimus saepe omnis, libero in voluptates debitis unde odio. Rerum illo adipisci deserunt, delectus ratione quam atque alias!</p>
  <p>Praesentium fugiat iste dolorem. Reiciendis voluptatum natus vel pariatur consequuntur perspiciatis quaerat dolorem nisi. Dignissimos eaque ipsa commodi amet, corrupti earum eos voluptatibus atque nulla labore aspernatur architecto cumque quaerat.</p>
  <p>Molestias earum aliquam accusamus pariatur. Veniam eum, dolorem quaerat totam illo ipsum quibusdam doloribus soluta incidunt odio odit explicabo sunt nostrum, commodi esse ducimus voluptates quam architecto perferendis quia error.</p></div>
</section>

<section class='grid'>
  <div></div>
  <div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, commodi inventore aliquam odio excepturi eum repellat quas necessitatibus velit reiciendis eaque dolores, voluptatibus ratione. Eos quisquam nesciunt veniam dolores quia.</p>
  <p>Accusamus porro accusantium recusandae nulla ea nemo incidunt praesentium facere! Esse atque inventore cumque aperiam provident ad est culpa omnis enim totam? Provident ipsa accusantium fuga ipsam asperiores, officia tempora.</p>
  <p>Iure eius asperiores quia? A distinctio officia voluptates necessitatibus, fugiat voluptatum officiis fugit ducimus consequuntur totam error enim quos. Architecto cupiditate nam cumque placeat autem atque sapiente iste facilis consequuntur!</p>
  <p>Alias deserunt laudantium, quam accusantium quos nulla consequatur rerum dolorem enim praesentium aut officia quod error eligendi quis assumenda reiciendis quasi? Laudantium quod provident hic dolor alias. Nostrum, provident ex.</p>
  <p>Voluptatem, eum? Possimus magni suscipit delectus sed corrupti porro ea neque fuga? In pariatur omnis labore atque hic rem officiis reprehenderit iste nihil, quae accusantium inventore obcaecati corrupti quis eaque.</p>
  <p>Et neque excepturi laudantium quisquam est deleniti dolore aliquid nobis placeat impedit ducimus saepe omnis, libero in voluptates debitis unde odio. Rerum illo adipisci deserunt, delectus ratione quam atque alias!</p>
  <p>Praesentium fugiat iste dolorem. Reiciendis voluptatum natus vel pariatur consequuntur perspiciatis quaerat dolorem nisi. Dignissimos eaque ipsa commodi amet, corrupti earum eos voluptatibus atque nulla labore aspernatur architecto cumque quaerat.</p>
  <p>Molestias earum aliquam accusamus pariatur. Veniam eum, dolorem quaerat totam illo ipsum quibusdam doloribus soluta incidunt odio odit explicabo sunt nostrum, commodi esse ducimus voluptates quam architecto perferendis quia error.</p></div>
</section>
@property --blockquoteGradient {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

html {
  font-size: 1.5rem;
  line-height: 1.5;
  font-family: system-ui;
}

.has-pullquote {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
  view-timeline: --section-pullquote block;
}

blockquote {
  font-size: 1.8rem;
  line-height: 1.2;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  
  background: linear-gradient(to right, red var(--blockquoteGradient), black var(--blockquoteGradient));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;  
  
  animation: blockquote linear both;
  animation-timeline: --section-pullquote;
}

@keyframes blockquote {
  from {
    scale: 0.75;
    opacity: 0;
    --blockquoteGradient: 0%;
  }
  20% {
    opacity: 0;
  }  
  80% {
    --blockquoteGradient: 100%;
  }
  to {
    opacity: 1;
    scale: 1;
    --blockquoteGradient: 100%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.